Javascript 单击菜单慢慢打开

我有一个jQuery onclick菜单，它在IE9+、Chrome和Firefox中运行得非常好。但是在IE8中，它的打开速度非常慢。菜单显示大约需要10秒钟，没有任何动画播放，菜单只是出现

该菜单使用最新版本的jQuery（v1.10.2），并且仅使用幻灯片和动画来打开和关闭菜单的不同部分。我曾经尝试过谷歌搜索IE8和jQuery的各种慢jQuery、慢加载菜单和慢动画组合，但我甚至找不到任何像我遇到的问题这样的远程组合

你可以去我的办公室看看问题所在。使用IE8访问它，当您单击测试类别1或2时，您会注意到速度非常慢

以前有人遇到过这种问题吗？有人知道是什么原因导致了它，以及使它正常工作的解决方案吗

编辑

我注意到它不仅影响菜单，还影响旋转木马。如果你看这些动画，它们也不会滑动，但是在IE9+中它们会滑动。我不确定这两者是否有联系，但奇怪的是，这两个jQuery效果都受到了影响

编辑2

经过更多的测试后，我注意到，如果菜单的底部落在旋转木马下面的标签上，那么标签上的位就会直接显示出来，如果你在标签上。关闭菜单时也会发生同样的情况。将鼠标悬停在选项卡上，在那里绘制的菜单就会消失

然后我观察并注意到，当旋转木马改变时，菜单会显示并消失。这似乎是一个重新绘制的问题，但是我一直试图让它在完成后绘制的代码似乎不起作用。这是我从另一个用户那里得到的代码（由于下面的答案，为了使用jQuery元素，我做了一些轻微的修改）

我认为这可能是找到要重画的正确函数，或者在正确的元素上运行该函数的情况。我目前在单击的元素上运行该命令，该命令可能不正确。我尝试在各种元素上运行该函数，包括主UL、单击的元素、打开的元素和打开的元素的父元素。他们中的任何一个都不走运

JSFiddle:应本期要求，但对我来说，这在IE10中甚至不起作用。它在铬精中工作

编辑3:

我已经剥去了所有的东西，除了最基本的东西，并把它放在一个测试文件中。你可以。我在IE控制台中没有收到任何错误，也没有在任何其他控制台中收到任何错误。它仍然给出了相同的问题，没有绘制菜单。然而，因为它后面没有旋转木马来强制重新绘制，所以它从未在这个测试站点上显示

---

到目前为止，我尝试的所有重画脚本都失败了。我如何才能让它工作？

播放动画时，幻灯片可能会覆盖菜单。 我可以将我的ie10设置为ie8模式，然后看到图层的显示顺序不是最好的

您是否尝试在菜单上设置z索引？

---

也许您尝试隐藏转盘临时菜单，然后检查菜单是否打开良好。

我不知道这是否相关，但我注意到每次单击这些菜单时都会出现错误

Uncaught TypeError: Cannot read property 'offsetTop' of null

---

它出现在“FlushThis”函数（来自jquery.fluid menu.js）中，这显然是支持IE的一种黑客行为。如果查看代码，它会尝试读取元素的“offsetTop”属性，然后简单地丢弃结果。也许这是IE的一个把戏，让它运行一些本地代码，一旦菜单打开，这些代码可能会重新绘制/重新显示页面？它看起来像是一个jqueryified元素（$this）被传递给该函数，而不是元素的ID，我认为这是导致查找失败的原因。您可能需要尝试让代码正确执行，看看它是否解决了您的问题。

这里使用“document.getElementById”而不是JQuery选择器，有什么具体原因吗？它没有找到

document.getElementById（id）

，它在这一行抛出了一个错误：

tmp=elementOnShow.parentNode.offsetTop+'px'：

function FlushThis(id){
    var msie = 'Microsoft Internet Explorer';
    var tmp = 0;
    var elementOnShow = document.getElementById(id);
    if(navigator.appName == msie) {
        tmp = elementOnShow.parentNode.offsetTop  +  'px';
    } else {
        tmp = elementOnShow.offsetTop;
    }
}

可能更改
var elementOnShow=document.getElementById（id）到
var elementOnShow=$（“#”+id）

还有，你为什么要在IE的末尾加上“px”？试着把它注释出来，让它只显示
tmp=elementOnShow.offsetTop
，看看这是否有区别

该错误可能只是禁用了该页面上其余的大部分Javascript


我还发现了另一件事：有时“slideUp”和“slideDown”以及其他“内置”动画方法在IE中似乎有问题或不稳定（比如，它们在大部分过程中都会设置动画，然后在动画接近尾声时停下来一秒钟，然后突然闪烁到最后）

我总是使用JQuery
animate（）
函数来处理所有事情。写起来有点麻烦，但是您可以指定考虑填充的outerHeight/outerWidth值以及类似的内容。尝试将函数替换为
animate（）
，看看是否有帮助
 脚本问题太多，无法研究真正的问题。

SCRIPT1028: Expected identifier, string or number 
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu' 
main.js, line 3 character 2

单击菜单时会出现脚本问题

Chrome和Mozilla在不让用户知道存在脚本错误的情况下最大限度地容忍错误。但我不是那么善良。IE 8&-天生运行脚本速度慢，许多动画效果无法在其中工作，因为它忽略了不透明度等属性，除非您有后退选项
 我现在已经设置了z索引，但不幸的是，它没有帮助。不过我注意到了另一件事，不仅仅是菜单慢了下来。我只是想用额外的信息更新我的初始问题。关于菜单，它似乎是动画。您可以在菜单和旋转木马中看到一个小片段。似乎宽度已设置动画，而高度未设置动画。也许jquery
SCRIPT1028: Expected identifier, string or number 
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu' 
main.js, line 3 character 2