jQuery每隔一段时间添加一个类_Jquery

jQuery每隔一段时间添加一个类

jquery

jQuery每隔一段时间添加一个类,jquery,Jquery,我想通过列表每隔一段时间添加一个类。这个类将是一个css动画，将把每个列表项带到页面上，因此效果将是一个项目的动画波。一个循环延迟addClass函数是完美的，但这是可能的吗 <html> <head> <style> ul li { -webkit-animation: animation .5s ease-out; } @-webkit-keyframes animation { from { -webk

我想通过列表每隔一段时间添加一个类。这个类将是一个css动画，将把每个列表项带到页面上，因此效果将是一个项目的动画波。一个循环延迟addClass函数是完美的，但这是可能的吗

<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>


ulli{
-webkit动画：动画。5s轻松播放；
}
@-webkit关键帧动画{
从{-webkit转换：
翻译（-500px）；}
要{-webkit转换：
翻译（0px）；}
}

一个
两个
三
四
五

或代码笔：

感谢所有能在这方面帮助我的人

我想你正在寻找

setInterval

函数，下面是一个如何使用它的示例：

如果你想在区间中添加

类

，请使用

setInterval

var time = 1000;

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

其中

是

second

编辑：在所有项目都已设置动画时添加一个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>


ulli{
-webkit转换：translateX（-500px）；
}
ulli.animate{
-webkit动画：动画。5s轻松播放；
-webkit转换：translateX（0px）；
}
@-webkit关键帧动画{
从{-webkit转换：
翻译（-500px）；}
要{-webkit转换：
翻译（0px）；}
}
$（文档）.ready（函数（）{
var interval=setInterval（函数（）{
如果（$（'li:not（.animate））.size（）=0）{
间隔时间；
}否则{
$（'li:not（.animate'）.first（）.addClass（'animate'）；
}
}, 400);
});

一个
两个
三
四
五

时间间隔，我想？当然-时间间隔很短，感谢所有及时回复的人。干得好，库萨，太好了-谢谢。