JavaScript缓动函数

Question

首先感谢您帮助我解决问题，Stackoverflow是一个很好的社区。同时请注意我对Javascript非常陌生。

这个问题涉及到我正在构建的网站：http://www.thewanderingguru.com/m2world2/?portfolio=the-trout 将浏览器宽度更改为小于960像素，以使移动菜单出现。现在点击页面右侧的菜单图标。您将看到主菜单栏出现，左侧的网站Logo会调整到页面下方。

我的问题是如何使Logo不会“跳”上下。我做了一些研究，并找到了我认为是用于缓和过渡效果的Jquery库，例如here，但我不确定如何在我的网站上实现它。请注意，此网站运行在Wordpress上。

我将包括管理菜单图标被点击时Logo类转换的代码。'.ubermenu-skin-vanilla.ubermenu-responsive-toggle'是菜单图标的类，当被点击时，将把“world”Logo（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中使用大量的“!Important”并不是最佳实践，但我使用的主题除非这样做，否则会覆盖我的代码。谢谢！

- Karl Werner

Answer 1

在调用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>

- pSaadi

Answer 2

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。

- Sebastian Simon

---

Xufox，感谢你的帮助。这个问题的答案确实是一个CSS问题。与Firefox检查器相比，Chrome的检查器不太明显。现在我知道更多关于如何实现转换效果的事情了。谢谢。 - Karl Werner