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

Question

我的webapp中有六个菜单选项，当用户将鼠标悬停在链接(ul>li>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()。