JQuery синхронная операция

Question

Я постепенно исчезаю, но кажется, что все исчезает одновременно.

Как я могу исчезать элементы один за другим. Только если один полностью исчезает, второй начинает исчезать.

Я зацикливаюсь и замираю вот так

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

Answer 1

fadeIn имеет обратный вызов, который выполняется после завершения замирания. Добавьте к каждому элементу класс elemX, где x - порядок замирания. Затем используйте следующий код:

startFading(1);

function startFading(order) {
   $(".ele" + order).fadeIn('slow', function() {
        if (order < orderMax) {
            startFading(order+1);
        }
   });
}

Answer 2

Я сделал этот быстрый / легкий плагин jQuery для вас, чтобы делать именно то, что вы хотите. :-)

$.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. Я надеюсь, что это сработает для вас.

Редактировать: Я расширил его, чтобы он теперь мог делать затухания и затухания. Просто так кажется более полезным ...

Answer 3

Вы можете сделать это универсальным и не заставлять его быть только для выцветания.

function depth(collection, fun, i) {
    if (i === undefined)
        depth(collection, fun, 0);
    else
        if (i < collection.length)
            fun(collection[i], function(){
                depth(collection, fun, i + 1);
            });
};

depth($("a"), function(elem, fun) {
    $(elem).fadeIn('slow', fun);
});