Javascript Easing

First thanks for helping me with my question. Stackoverflow is a great community. Also know that I am very new to Javascript.

This issue is related to the website I am building: http://www.thewanderingguru.com/m2world2/?portfolio=the-trout

Change the width of your browser to less than 960 pixels for the mobile menu to appear. Now click the menu icon on the right side of the page. The main menu bar appears, and the site logo on the left changes down the page down.

My question is how to make the logo not "jump" up and down. I did some research and found what I think is Jquery libraries to facilitate navigation: for example here , but I'm not sure how to implement this on my site.Know that this site works with Wordpress.

I will include the code to handle the transition of the class for the logo when the menu icon is clicked. ".ubermenu-skin-vanilla.ubermenu-responsive-toggle" is a menu icon class that, when clicked, changes the class of the "world" logo (div id = '#logo') from 'logo1' to 'logo2

I tried adding CSS transitions, but that didn't make it easier to jump into the #logo div. I think javascript easing is necessary, but I don't know how to implement it. Thanks again for your help and advice.

Here is the javascript:

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

      

And here is my current CSS:

@media only screen and (min-width: 0px) and (max-width:959px){
.logo1{
  margin-top: 20px !Important;
  max-width: 90px !Important; 	
transition: margin-top,max-width .7s ease-in-out !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out !Important;
-o-transition: margin-top,max-width .7s ease-in-out !Important;
-moz-transition: margin-top,max-width .7s ease-in-out !Important;
}
.logo2{
  margin-top: 20px  !Important;
  max-width: 90px  !Important; 	
transition: margin-top,max-width .7s ease-in-out  !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out  !Important;
-o-transition: margin-top,max-width .7s ease-in-out  !Important;
-moz-transition: margin-top,max-width .7s ease-in-out  !Important;
}


.logo2{
  margin-top: 170px  !Important;
  max-width: 90px  !Important; 	
transition: margin-top,max-width .7s ease-in-out  !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out  !Important;
-o-transition: margin-top,max-width .7s ease-in-out  !Important;
-moz-transition: margin-top,max-width .7s ease-in-out  !Important;
}
}
      

Run codeHide result


PS. I know I use a lot of "! Important" in my CSS, but this is not best practice, but the theme I am using continues to override my code unless I do so. Thank!

+3


source to share


2 answers


transition: margin-top,max-width .7s ease-in-out !Important;

      

You are applying a property transition

to two properties, but only specifying one duration (and so on). This is how Firefox interprets it:

CSS analysis: the crucial property has a duration of 0s

Notice how the first duration is always 0s

? This is a problem (always look at the CSS debugger and parser, etc.)!



Fortunately, Firefox is also reformatting the property so that we know how to change the syntax and apply the values ​​correctly:

transition: margin-top .7s ease-in-out,max-width .7s ease-in-out !important;

      

Both transition properties now have a duration and both have a sync function. Apply this to all of your rules that use multiple transition properties, and the transition at least works. You now need to tweak the values ​​a little and you should be fine.

Also: his !important

, not !important

.

0


source


You can set the duration of the animation when you call toggleClass by passing an additional parameter representing the number of milliseconds to animate.

Instead of calling:

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

      



try using something like

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1',1000);$('#logo').toggleClass('logo2', 1000);});});</script>

      

0


source







All Articles