搖擺CSS動畫

我有一個CSS動畫，我想以200ms的間隔應用。我已經設置了CSS這樣的：搖擺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;  
}

然後我想錯開在200ms的時間間隔.discrete.out類的應用。我已經試過如下：

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

這：

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

但在這兩種情況下，動畫只是發生一次全部！

任何想法？

來源

2013-09-28 daniel0mullins

你可以使用

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

Demo

來源

2013-09-28 23:06:49 Oriol

標記爲接受這一個，因爲這種方法似乎更快，是顯著比使用jQuery的動畫隊列！謝謝大家！ – daniel0mullins

嘗試使用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在向fx隊列添加200 ms延遲後立即添加'out'類。換句話說，delay（）不會暫停未添加到隊列中的項目。有關jQuery隊列如何工作的更多信息，請參閱：What are queues in jQuery?。（ '離散 '）。

$每個（函數（）{$ （本）.delay（200）.addClass（' 出'）;}）;

在第二個示例中，您將爲每個.discrete元素添加相同的超時值。所以在大約200ms之後，每個人都會在幾乎同一時間添加一個類。相反，你可能會想爲每個元素設置一個200ms的超時，然後是400ms，然後是600ms等等。（ '離散 '）。

$每個（函數（）{風險theNode = $（本）;
的setTimeout（函數（）{ theNode.addClass（' 出'）;} ，200 ）;}）;

來源

2013-09-28 23:06:15

回答

相關問題