Javascript宽松

首先谢谢你帮我回答我的问题。Stackoverflow是一个很棒的社区。我也知道我对Javascript非常陌生

此问题与我正在创建的网站有关：

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

我的问题是，我如何使徽标不“跳”起来。我做了一些研究，发现了我认为可以简化转换的Jquery库：例如，但我不确定如何在我的网站上实现它。要知道这个网站没有Wordpress

我将包括在单击菜单图标时管理徽标类转换的代码。“。ubermenu skin vanilla.ubermenu responsive toggle'是菜单图标的类别，单击该图标时，将“世界”徽标（div id=“#徽标”）的类别从“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>

过渡：页边空白顶部，最大宽度。7秒轻松进出！重要的；

您正在将

转换

属性应用于两个属性，但仅指定一个持续时间（等）。Firefox就是这样解释的：

注意第一个持续时间总是

0s

？这就是问题所在（总是先查看调试器和CSS分析器等）

幸运的是，Firefox还以这样一种方式重新设置了属性，即我们知道如何更改语法并正确应用值：

过渡：页边距顶部。7秒宽，最大宽度。7秒宽！重要的；

现在，两个转换属性都有一个持续时间，并且都有一个计时函数。将此应用于使用多个转换属性的所有规则，并且至少转换有效。现在只需稍微调整一下值，就可以了

---

还有：它是

！重要信息

，而不是

！重要信息

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

而不是打电话：

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

jQuery（document）.ready（函数（$）{$（'.ubermenu.ubermenu响应切换'）。单击（函数（{$（'#logo'））.toggleClass（'logo1'）；$（'#logo'）。toggleClass（'logo2'）；}）；

试着用像这样的东西

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

jQuery（document）.ready（函数（$）{$（'.ubermenu.ubermenu响应切换'）。单击（函数（{$（'#logo'））.toggleClass（'logo1'，1000）；$（'#logo'）。toggleClass（'logo2'，1000）；}）；

Xufox，谢谢您的帮助。这个问题的答案确实是一个CSS问题。Chrome的inspector对于您在使用Firefox inspector时指出的内容没有那么明显。现在我对如何实现转换有了更多的了解。谢谢