javascript - jquery/js : best way to have an image fading in and out?(递归？)

Question

有没有比这更好的方法，因为两张图片彼此重叠，其中 #state_2 是最上面的图片。

function recursive_fade(){
    $('#top_img').delay(4000).fadeOut(400).delay(4000).fadeIn(400);
    recursive_fade();                
};

$(function(){
    recursive_fade(); 
});

当我对此进行动态跟踪时，它似乎使用了相当多的 cpu...

Answer 1

你应该在这里使用延续风格:让 fx 系统在最后一个动画结束时调用 recursive_fade:

function recursive_fade(){
    $('#top_img')
         .delay(4000)
         .fadeOut(400)
         .delay(4000)
         .fadeIn(400, recursive_fade );
};

EDIT 2 - 同时，似乎(jQuery forum 长存)效果是使用队列和 setTimeout 函数实现的 - 使 EDIT 1 过时。

编辑 - 因为我不知道 jQuery 是否允许这种递归(我没有找到令人信服的证据)，我认为最好将“超时”建议与延续技术结合起来，如下所示:

<罢工>

function recursive_fade(){
    $('#top_img')
         .delay(4000)
         .fadeOut(400)
         .delay(4000)
         .fadeIn(400, function() { setTimeout( recursive_fade, 0 ); } );
};

这提供了堆栈不会爆炸的保证，同时避免了计算超时间隔的需要。