jQuery間隔添加班級

我想通過列表間隔添加班級。這個類將是一個css動畫，它將把每個列表項放到頁面上，所以這個效果將成爲一個動畫項目的浪潮。循環延遲addClass函數將是完美的，但這甚至有可能嗎？jQuery間隔添加班級

<html> 
<head> 
<style> 
    ul li { 
     -webkit-animation: animation .5s ease-out; 
    } 
    @-webkit-keyframes animation { 
     from { -webkit-transform: 
      translate(-500px); } 
     to { -webkit-transform: 
      translate(0px); } 
    } 
</style> 
</head> 
<body> 

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
</ul> 

</body> 
</html>

或CodePen： http://cdpn.io/aAxHp

感謝的人誰可以幫我這個

來源

2013-07-22 Padwah

區間，我認爲？ – Akheloes

肯定 - 短時間間隔 – Padwah

編輯：增加了clearInterval當所有的項目都在動畫，或者它會坐在那裏永遠運行時間

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<style> 
    ul li{ 
     -webkit-transform: translateX(-500px); 
    } 
    ul li.animate { 
     -webkit-animation: animation .5s ease-out; 
     -webkit-transform: translateX(0px); 
    } 
    @-webkit-keyframes animation { 
     from { -webkit-transform: 
      translate(-500px); } 
     to { -webkit-transform: 
      translate(0px); } 
    } 
</style> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    var interval = setInterval(function(){ 
    if($('li:not(.animate)').size() == 0){ 
     clearInterval(interval); 
    }else{ 
     $('li:not(.animate)').first().addClass('animate'); 
    } 
    }, 400); 
}); 

</script> 
</head> 
<body> 

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
</ul> 

</body> 
</html>

來源

2013-07-22 17:27:34 koosa

感謝所有誰及時回覆。做得很好的koosa，這很完美 - 謝謝。 – Padwah

我認爲你正在尋找的setInterval功能，這裏是它是如何使用的例子：jsfiddle

來源

2013-07-22 17:24:20 Akheloes

如果你想在一個區間中添加class使用setInterval

var time = 1000; 

setInterval(function(){ 
    $('ul').find('li') //or loop through 'li' depends on what you want to select 
     .addClass('some-class') 
},time);

其中1000是1秒

來源

2013-07-22 17:25:08 steo

jQuery間隔添加班級

回答

相關問題