如何添加類到div使用jquery像動畫序列

我試圖使用jQuery模擬此GIF的動畫（我試過css3動畫關鍵幀，但它不是整齊，不好，除非有一個更簡單的方法與css3 ）如何添加類到div使用jquery像動畫序列

Animation with CSS3

我想添加的每個CSS類有背景顏色和背景的位置

<div class="displayer ico1"></div>

CSS類的陣列是ico1 ico2 ico3 --- ico6。我需要在每次更改之間暫停3秒，當然他們必須循環回到ico1 2 3等。

我知道.queue()函數，但我不知道如何正確使用它來模擬它。

任何幫助，將不勝感激

感謝

編輯----

我發現這個jQuery插件 https://github.com/madbook/jquery.wait

那請問這招很整齊！

$('.displayer').addClass('ico1').wait(5000).removeClass('ico1').addClass('ico2').wait(5000).removeClass('ico2').addClass('ico3').wait(5000).removeClass('ico3').addClass('ico4').wait(5000).removeClass('ico4').addClass('ico5').wait(5000).removeClass('ico5').addClass('ico6').wait(5000).removeClass('ico6');

現在我唯一的問題是循環回到開始

任何想法？

來源

2014-09-13 John Mersal

那麼這個代碼將幫助，

實際上我使用setInterval功能之後3秒將觸發功能，所有的類被放置在陣列

在後3個第二個類是除去等加入這繼續在一個循環

<script type='text/javascript'> 

     $(document).ready(function(){ 

      imageArray = new Array('icon1' , 'icon2', 'icon3', 'icon4', 'icon5', 'icon6'); //add more classes in this array 
      i=0; // first class to be used 
      setInterval(function(){ 
      i = (i >= imageArray.length)?0:i; 
      $('.displayer').removeClass(imageArray.join(' ')).addClass(imageArray[i++]); 
      },1000); // this is the time in millisecond    
     }); 
    </script>

<div class="displayer"></div>

來源

2014-09-13 06:35:28 sanjeev

真棒！謝謝！！！！！！ – 2014-09-13 06:45:35

標記爲正確@JohnMersal，謝謝 – sanjeev 2014-09-13 06:46:28

哈哈抱歉忘記了！我只是投了它:)，完成 – 2014-09-13 07:00:39

如何添加類到div使用jquery像動畫序列

回答

相關問題