Mouseleave 不适用于 .each 和延迟？

Question

我已经编写了一些代码来更改 a 标签内每个字母的颜色，并在您悬停链接时显示一个弹出窗口。

mouseenter 功能可以正常工作，但是当您将鼠标悬停在链接上时，我想做与原始更改相反的操作（所以改回原来的颜色）。

我将延迟从它的工作中移除，但效果并不好。我很困惑为什么这在输入时有效但在休假时无效？

另外要提到的是，当它确实将颜色变回灰色时，mouseenter 功能不再起作用，这有点烦人。

这是该网站的链接，您可以看到我在说什么，该链接位于底部，上面写着“触摸营销”

http://dev.touch-akl.com/colin/

有什么帮助吗？

我的 jQuery 看起来像这样

$('#copyright a').mouseenter(function(){

    var $letters = $(this).find('span'),
    $sayhi = $(this).find('img'),
    delay = 0;

    $sayhi.animate({top:-30, 'opacity':1}, 500, "easeInOutExpo");

    $letters.each(function(){

        $(this).delay(delay).queue(function(){
            $(this).css({'color':'#333'});
        });

        delay+=35;      

    }); // end each

}).mouseleave(function(){

    var $letters = $(this).find('span'),
    delay = 0;

    $letters.each(function(){

        $(this).delay(delay).queue(function(){
            $(this).css({'color':'#333'});
        }); 

        delay+=35;      

    });

}); // end leave

Answer 1

jQuery .queue() 的正确使用很复杂，因此除非您需要与 jQuery 动画队列中的其他事物进行交互，否则像这样使用 setTimeout() 通常要简单得多。您还应该将 delay 设为局部变量，使其不是隐式全局变量。

}).mouseleave(function(){
    var delay = 0;
    $(this).find('span').each(function(){
        var item = $(this);

        setTimeout(function(){
            item.css({'color':'#333'});
        }, delay); 

        delay+=35;      
    });
}); // end leave

Answer 2

很可能问题出在 mouseenter 和 mouseleave 中的函数创建的闭包上。它们都引用了相同的 delay 变量。您可能想将它们分开：

delayEnter = 0;
delayLeave = 0;