带有 Internet Explorer 和跳跃动画的 jQuery slideToggle()答案

【问题标题】：jQuery slideToggle() with Internet Explorer and jumpy animation带有 Internet Explorer 和跳跃动画的 jQuery slideToggle()
【发布时间】：2013-03-31 10:14:14
【问题描述】：

我的 jquery 有一个大问题。我终于让我的滑动切换在 Firefox 中运行。动画的结尾有点跳动。我阅读了很多解决方法，但不知何故没有真正帮助我。也许你们中的任何人都可以把我从这个困境中解救出来。

另一个更大的问题是隐藏的 div 很不幸直接在 Internet Explorer 中启动时显示。我在IE6&7中测试过。而且滑动效果也很奇怪。

你们有谁知道我是否需要为 IE 提供额外的样式？？？

这是我正在开发的网站：

http://www.haus-plan.de/_01_Hausplan/

内容区域的红色标题和右侧面板上的两个 Slide 单词是可滑动的。

我注意到 Internet Explorer 可以正确运行右侧面板上的第一个 Slide 单词。这里它的 div 首先是隐藏的，只有当我们单击并让它向下滑动时才会显示出来。但是对于其他 div，它们在开头显示，这非常糟糕.....

请帮帮忙……

【问题讨论】：

标签： jquery internet-explorer hide show slidetoggle

【解决方案1】：

要在加载时保持 div 隐藏，请尝试将 'd_show _hide' 类设置为“display:none”，然后将其放在您的 DOM 上：

$('.d_show_hide').show();

CSS 将加载设置为不显示的样式，然后，当 DOM 准备好时，它将显示您的 div。你可以把它放在你的“slideToggle”方法调用之后。

您也可以尝试在窗口就绪而不是 DOM 就绪时加载 'd_show _hide' div；这将确保其中的元素在调用该方法之前已准备好使用。

$(window).load(function(){
   //slide toggle here
}

【讨论】：

【解决方案2】：

<li>
    <a href="#" id="sombra" onclick="$('#opt_1').slideToggle(360);">MUEBLES</a>
    <!-- just have to force the width of the elemet! -->
    <ul id="opt_1" style="display:none; width:164px;">
        <!-- content -->
    </ul>
</li>

只需要强制容器的宽度就是问题！

【讨论】：