Question

我不知道这是否可行，但我有3个DIV，它们都有fadeIn和Out。像这样：

    $('.boxHolder1').hover(function() {
        $('img.top1').fadeOut(400);
    },function() {
        $('img.top1').fadeIn(400);
    });
    $('.boxHolder2').hover(function() {
        $('img.top2').fadeOut(400);
    },function() {
        $('img.top2').fadeIn(400);
    });
    $('.boxHolder3').hover(function() {
        $('img.top3').fadeOut(400);
    },function() {
        $('img.top3').fadeIn(400);
    });

我的问题。

无论如何都是为了让这段代码更有效率，当我用鼠标在DIV上垃圾邮件时，我得到一个延迟，DIV只是淡入淡出并且随机，就像它记录的X悬停一样，并相应地应用代码。

Answer 1

您应该使用jQuery中的stop函数来停止以前运行的任何动画：

$('.boxHolder1').hover(
    function() { $('img.top1').stop().fadeOut(400); },
    function() { $('img.top1').stop().fadeIn(400); });
$('.boxHolder2').hover(
    function() { $('img.top2').stop().fadeOut(400); },
    function() { $('img.top2').stop().fadeIn(400); });
$('.boxHolder3').hover(
    function() { $('img.top3').stop().fadeOut(400); },
    function() { $('img.top3').stop().fadeIn(400); });

Answer 2

是的，事件处理程序调用已排队。那当然不是一个错误。

在回调中，您可以使用stop()来停止当前正在运行的动画。确保将true作为第一个参数取消排队，并true作为第二个参数来立即停止当前正在运行的动画，同时保留其目标属性。

$('.boxHolder3').hover(function() {
    $('img.top3').stop(true, true).fadeOut(400);
},
function() {
    $('img.top3').stop(true, true).fadeIn(400);
});

虽然你可以通过巧妙地使用变量来减少代码重复，但你不会再“高效”了。

Answer 3

您可以在任何FADEIN / FADEOUT之前停止动画。

实施例

$('img.top1').stop(true,true).fadeOut(400);

它将清除队列并立即完成动画。更改stop（）函数的两个参数以满足您的需求。

jQuery .fadeOut（）; 。淡入（）;垃圾邮件？

3 个答案: