Question

我的网络应用程序中有六个菜单选项，当用户将鼠标悬停在链接上时（ul＆gt; li＆gt; a）我切换图像以显示上下文相关照片，然后我将图像淡入淡出。但是，我注意到当用户在链接之间快速移动鼠标时，队列无法正常处理，用户通常会将鼠标悬停在链接上，并显示上一个悬停时显示的旧图像。经过一些阅读后，看起来正确的做法是使用stop（）方法，但是当我尝试实现它时，ie6会报告堆栈溢出。

这是我的旧代码（具有旧图像问题）：

if(webImage != 'img/template/slide_web.png') {
                        $('#slide img').fadeOut(function() {
                            $(this).load(function() {$(this).fadeIn(); });
                            $(this).attr('src','img/template/slide_web.png');
                        });

这是我的新代码（它解决了旧问题，但导致ie6在第一行堆栈溢出）：

if(webImage != 'img/template/slide_web.png') {
                        $('#slide img').stop(true, true).fadeOut(function() {
                            $(this).load(function() {$(this).stop(true, true).fadeIn(); });
                            $(this).attr('src','img/template/slide_web.png');
                        });

我是否错误地实现了stop（）方法？或者还有另一种方法可以避免jQuery淡入淡出队列失去它的位置吗？

Answer 1

问题在于这一行：

$(this).load(function() {$(this).stop(true, true).fadeIn(); });

您正在淡出新 .load()处理程序（虽然功能相同）每个时间，因此您需要绑定它一次，超出此范围，或.unbind()，如下：

$(this).unbind('load').load(function() {$(this).stop(true, true).fadeIn(); });

如果没有它，它会尝试同时运行这些加载处理程序，它无法处理，有效地，它连续执行.stop(true, true).fadeIn() 多次次。

jquery停止方法导致ie6堆栈溢出

1 个答案: