Question

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

感谢任何可以帮助我解决这个问题的人

Answer 1

我认为您正在寻找setInterval函数，以下是如何使用它的示例：jsfiddle

Answer 2

如果您想在间隔中添加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秒

Answer 3

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

jQuery每隔一段时间添加一次

3 个答案: