Javascript Easing

Question

首先，感谢您帮助我解决问题。 Stackoverflow是一个很棒的社区。也知道我对Javascript很新。

此问题涉及我正在构建的网站：http://www.thewanderingguru.com/m2world2/?portfolio=the-trout

将浏览器的宽度更改为小于960像素，以便显示移动菜单。现在单击页面右侧的菜单图标。您将看到主菜单栏出现，左侧的站点徽标在页面上向下调整。

我的问题是如何让徽标不会“跳”起来。我做了一些研究，发现我认为Jquery库用于简化转换：例如here但我不确定如何在我的网站上实现它。知道这个网站是用Wordpress运行的。

单击菜单图标时，我将包含管理徽标类转换的代码。 '.ubermenu-skin-vanilla.ubermenu-responsive-toggle'是菜单图标的类，单击该图标时，将“world”徽标的类别（div id ='＃logo'）从'logo1'更改为' LOGO2'

我尝试添加CSS过渡，但这无助于缓解#logo div的跳跃。我认为需要javascript缓动，但我不知道如何实现它。再次感谢您的所有帮助和建议。

这是javascript：

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

这是我目前的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。我知道在我的CSS中我使用了很多'！重要'这不是最佳实践，但我正在使用的主题不断覆盖我的代码，除非我这样做。谢谢！

Answer 1

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

您正在将transition属性应用于两个属性，但仅指定一个持续时间（等）。这就是Firefox如何解释：

请注意第一个持续时间始终为0s？这就是问题（首先要考虑调试器和CSS分析器等等）！

幸运的是，Firefox还重新格式化了属性，以便我们知道如何更改语法并正确应用值：

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

现在两个转换属性都有一个持续时间，两个都有一个计时功能。将此应用于您使用多个转换属性的所有规则，并且转换至少有效。现在你只需稍微调整一下这些值，你应该没事。

另外：它是!important，而不是!Important。

Answer 2

通过传递表示动画毫秒数的附加参数，可以在调用toggleClass时设置动画的持续时间。

而不是打电话：

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

尝试使用类似

的内容

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