如何使用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（）方法？

回答

相关问题