Javascript Easing

Question

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

This issue concerns a web site I am building: http://www.thewanderingguru.com/m2world2/?portfolio=the-trout

Change the width of your browser to less than 960px so that the mobile menu appears. Now click on the menu icon on the right hand side of the page. You will see the main menu bar appear and the site logo on the left readjust itself lower down on the page.

My question is how do I get the logo to not "jump" down and up. I did some research and found what I think are Jquery libraries for easing transitions: such as here but I am unsure about how to implement this on my site. Know that this site runs off of Wordpress.

I will include the code that manages the class transition for the logo when the menu icon is clicked. '.ubermenu-skin-vanilla.ubermenu-responsive-toggle' is the class of the menu icon which, 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 help ease the jumping of the #logo div. I think javascript easing is needed but I do not know how to implement it. Thanks again for all 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; } } 

PS. I know that in my CSS I'm using a lot of '!Important' which isn't best practice but the theme I'm using keeps overriding my code unless I do. Thanks!

Answer 1

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

You are applying the transition property to two properties but specify only one duration (etc.). This is how Firefox interprets that:

Notice how the first duration is always 0s ? That's the issue (always look into the debugger and CSS analyzer, etc. first)!

Fortunately, Firefox also reformats the property in such a way 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;

Now both transition properties have a duration and both have a timing function. Apply this to all your rules that use multiple transition properties and the transition at least works. Now you only need to tweak the values a bit and you should be fine.

Also: it's !important , not !Important .

Answer 2

You can set the duration of the animation when calling toggleClass by passing an additional parameter representing the number of milliseconds of the animation.

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 to use 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>