如何使用addClass和延遲執行.each（）方法？

我知道的.delay（）方法，但我相信只適用於添加到隊列的動畫。如何使用addClass和延遲執行.each（）方法？

我在做什麼是用css3（添加和刪除類不透明）製作動畫「波」效果。

我希望動畫有一個延遲，例如介於.3s之間，以及當整個動畫完成時，它應該保持循環。動畫也應該開始在「疊加」方式，使得不是所有的人都在一次

這就是我試圖到目前爲止寫淡出，但它不工作

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.css-pineapple div').each(function(i) { 
      addO($(this)); 
     }); 
    }); 

    function addO(element) { 
     setTimeout(function() { 
      element.addClass('opaque'); 
     }, 800); 
     removeO(element); 
    } 

    function removeO (element) { 
     setTimeout(function() { 
      element.removeClass('opaque'); 
     }, 500); 
    } 
</script> 

<div class="css-pineapple"> 
    <div class="t1"></div> 
    <div class="t2"></div> 
    <div class="t3"></div> 
    <div class="b1"></div> 
    <div class="b2"></div> 
    <div class="b3"></div> 
    <div class="b4"></div> 
    <div class="b5"></div> 
    <div class="b6"></div> 
    <div class="b7"></div> 
    <div class="b8"></div> 
    <div class="b9"></div> 
    <div class="b10"></div> 

</div>

來源

2012-07-27 st0rk

這是很難回答沒有小提琴或更多的東西來看待，但嘗試：

$(document).ready(function(){ 
    Start($('.css-pineapple div')); 
}); 

function Start(elem) { 
    elem.each(function(i, e) { 
     setTimeout(function() { 
      $(e).addClass('opaque'); 
      setTimeout(function() { 
       $(e).removeClass('opaque'); 
       if (i>=elem.length-1) Start($('.css-pineapple div')); 
      }, 500); 
     }, 800*i); 
    }); 
}

來源

2012-07-27 23:00:13 adeneo

完美！當它全部完成後，我如何才能重新開始？多數民衆贊成在 – st0rk 2012-07-27 23:07:20

@ user1558866 - 做了一些編輯，不知道它的工作，因爲我沒有測試過，但你可以試試看。 – adeneo 2012-07-27 23:13:20

通過將索引更改爲i並將其添加-1來實現它 – st0rk 2012-07-28 04:07:36

試試這個：

（每個元素增加800延遲）

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.css-pineapple div').each(function(i) { 
      addO($(this),800*i); 
     }); 
    }); 

    function addO(element,delay) { 
     setTimeout(function() { 
      element.addClass('opaque'); 
      removeO(element); 
     }, delay); 
    } 

    function removeO (element) { 
     setTimeout(function() { 
      element.removeClass('opaque'); 
     }, 500); 
    } 
</script>

來源

2012-07-27 22:58:07 Hogan

熱的該死的，有沒有什麼辦法讓它在整個動畫結束時以同樣的方式退出，然後重複？ – st0rk 2012-07-27 23:00:15

是的，將刪除添加到具有延遲的功能 - 它將在半秒後刪除。（如上） – Hogan 2012-07-27 23:02:14

如何使用addClass和延遲執行.each（）方法？

回答

相關問題