Ошеломляющие анимации CSS

Question

У меня есть анимация CSS, которую я хочу применять с интервалом в 200 мс. Я создал CSS, как это:

.discrete { 
    position:relative; 
    opacity:1; 

    -webkit-transition: all .5s linear; 
    -moz-transition: all .5s linear; 
    -o-transition: all .5s linear; 
    transition: all .5s linear; 
} 

.discrete.out { 
    left:-40px; 
    opacity:0;  
} 

Затем я хочу, чтобы разнести применение .discrete.out класса в 200ms интервалах. Я попытался следующие:

$('.discrete').each(function() { 
    $(this).delay(200).addClass('out'); 
}); 

И это:

$('.discrete').each(function() { 
    var theNode = $(this); 
    setTimeout(function() { 
     theNode.addClass('out'); 
    }, 200); 
}); 

Но в обоих случаях, анимация просто происходит все сразу!

Любые идеи?

Answer 1

Вы можете использовать

var els = $('.discrete'), 
    i = 0, 
    f = function() { 
     $(els[i++]).addClass('out'); 
     if(i < els.length) setTimeout(f, 200); 
    }; 
f(); 

Demo

Answer 2

Попробуйте использовать очереди анимации JQuery: http://jsfiddle.net/gwwar/7zm6q/2/

function createWorkQueueFunction($element) { 
    return function(next) { 
     $element.addClass("out"); 
     next(); 
    }; 
} 

$('button').click(function() { 
    var queue = $({}); //use the default animation queue 
    $(".discrete").each(function() { 
     queue.queue(createWorkQueueFunction($(this))); 
     queue.delay(200); 
    }); 
}); 

Но почему не работают ваши примеры?

Причина, по которой следующее не работает, заключается в том, что jQuery сразу добавит класс 'out' после добавления задержки 200 мс в очередь fx. Другими словами, delay() не будет приостанавливать элементы, которые не добавляются в очередь. Пожалуйста, смотрите: What are queues in jQuery? для получения дополнительной информации о том, как работают очереди jQuery. ('') Дискретные.

$ каждая (функция() { $ (это) .delay (200) .addClass (наружу');});

Во втором примере вы добавляете один и тот же тайм-аут к каждому из .discrete элементов. Таким образом, после примерно 200 мс каждый будет иметь класс, добавленный к нему примерно в одно и то же время. Вместо этого вы, вероятно, хотели бы установить тайм-аут 200 мс, затем 400 мс, затем 600 мс и т. Д. Для каждого элемента. ('') Дискретные.

$ каждая (функция() {вар theNode = $ (это);
SetTimeout (функция() { theNode.addClass (наружу'); }, 200);});