jquery/js:图像淡入淡出的最佳方法? (递归?) [英] jquery/js : best way to have an image fading in and out? (recursion?)

问题描述

对于两个相互重叠的图像(#state_2是顶部图像)，有没有比这更好的方法了.

Is there a better way than this, for two images positioned over each other where #state_2 is the top image.

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

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

当我动态跟踪时，似乎使用了相当多的cpu ...

When i dynatrace this, it seems to use fair bit of cpu...

推荐答案

您应在此处使用延续样式:在最后一个动画结束后，让fx系统调用recursive_fade:

You should use continuation-style here: let the fx system call the recursive_fade when the last animation has finished:

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

编辑2-同时，(

EDIT 2 - meanwhile, it seems (long liveth the jQuery forum) that the Effects are implemented using a queue and the setTimeout function - making EDIT 1 obsolete.

EDIT-因为我不知道jQuery是否允许这种递归(我没有令人信服的证据)，所以我认为最好将超时"建议与延续技术结合起来，像这样:

EDIT - since I have no idea if jQuery allows this recursion (I didn't find convincing proof), I think it's best to combine the "Timeout" suggestions with the continuation technique like so:

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

这提供了保证堆栈不会崩溃，但又避免了计算超时间隔的需要.

This offers the guarantee that stack won't blow up, yet avoids the need to calculate the timeout interval.

这篇关于jquery/js:图像淡入淡出的最佳方法? (递归?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！