0

我想通过列表每隔一段时间添加一个类。这个类将是一个 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>

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

感谢任何可以帮助我的人

4

3 回答 3

0

我认为您正在寻找该setInterval功能，这是如何使用它的示例：jsfiddle

于 2013-07-22T17:24:20.740 回答
0

如果要class在间隔中添加 asetInterval

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-22T17:25:08.687 回答
0

编辑：当所有项目都动画化时添加一个 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-22T17:27:34.527 回答