jQuery .fadeOut(); 。淡入();垃圾邮件?

时间:2011-08-02 01:43:30

标签: jquery fadein fadeout

我不知道这是否可行,但我有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悬停一样,并相应地应用代码。

3 个答案:

答案 0 :(得分:2)

您应该使用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); });

答案 1 :(得分:0)

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

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

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

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

答案 2 :(得分:0)

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

实施例

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

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