jQuery同步操作 [英] jQuery synchronous operation

问题描述

我正在逐步淡化元素，但似乎所有元素都一下子消失了.

I am fading elements one by one but it seems it all fades at once.

如何使元素一一淡出.只有当一个完全消失时，第二个才开始褪色.

How can I fade elements one by one. Only if one fades completely, should the second start fading.

我这样循环播放并淡入淡出

I loop and fade it like this

$(ele).fadeIn('slow');

推荐答案

我制作了这个快速/简单的jQuery插件，让您可以按照自己的意愿进行操作. :-)

I made this quick/easy jQuery plugin for you to do just what you want. :-)

$.fn.extend({
    serial_fade: function(o) {
        if(!o.speed || o.speed == undefined || o.speed == null) { o.speed = 'slow'; }
        if(!o.fade || o.fade == undefined || o.fade == null)    { o.fade = 'in'; }
        if(!o.index || o.index == undefined || o.index == null) { o.index = 0; }
        var s = this.selector;
        if(o.fade.toLowerCase() == 'in') {
            return this.eq(o.index).fadeIn(o.speed, function() {
                o.index++;
                if($(s).eq(o.index).length > 0) {
                    $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index});
                }
            });
        } else {
            return this.eq(o.index).fadeOut(o.speed, function() {
                o.index++;
                if($(s).eq(o.index).length > 0) {
                    $(s).serial_fade({speed:o.speed,fade:o.fade,index:o.index});
                }
            });
        }
    }
});

// To call it just do this:
$(ele).serial_fade({speed:'slow',fade:'in'});

// Optionally, you can pass which element you want to start with (0-based):
 $('a').serial_fade({speed:'slow',fade:'in',index:2});

// If you want to start with element 2 (3, really) and fade all the rest *out*
// sequentially, verrry slowly:
$(ele).serial_fade({speed:5000,fade:'out',index:2});

它应该可以与任何其他选择器一起使用，就像其他任何jQuery方法一样.希望对您有用.

It should work with ANY kind of selector just like any other jQuery method does. I hope this works out for you.

编辑:我对其进行了扩展，以便它现在可以淡入淡出和淡出.这样看来似乎更有用...

I extended it so that it can do fade ins and fade outs now. It just seems more useful that way...

这篇关于jQuery同步操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！