jquery - CSS3和Jquery动画-几秒钟后重复

我像这样创建了一个css3动画

http://jsfiddle.net/WXHjN/

我正在使用以下Jquery来控制时间间隔

$(document).ready(function(){
    $('#web').addClass("fadeInLeft");
    window.setTimeout(function(){
        $('#development').addClass("fadeInLeft");
    },300)
});

在上面的示例中，动画仅一次发生。
我需要此动画在几秒钟后重复。同样，它必须在无穷大的时间重复。

最佳答案

您也可以尝试以下逻辑

$(document).ready(function(){
    animateItems();
});

var animationRef;

function animateItems()
{
    $('#web').removeClass("fadeInLeft");
    $('#development').removeClass("fadeInLeft");

    window.setTimeout(function(){
        $('#web').addClass("fadeInLeft");},300);

  window.setTimeout(function(){
      $('#development').addClass ("fadeInLeft");
  },600);

     animationRef = window.setTimeout(animateItems,2000);
};

逻辑上说，删除fadeInLeft类和setTimeout以执行显示文本的功能。

我已经将timeout的引用存储在animationRef变量中以清除超时，您的代码中不应使用该超时。

Fiddle Demo