Question

我知道.delay（）方法，但我认为这仅适用于向队列添加动画。

我正在做的是使用css3制作动画'wave'效果（添加和删除不透明类）。

我希望动画有延迟，比如介于两者之间。当完成每个动画时，它应该保持循环。动画也应该以“堆叠”的方式开始，以便不是所有的动画都会立即淡入

这是我到目前为止所写的内容，但它不起作用

<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>

Answer 1

如果没有小提琴或其他更多内容，这很难回答，但请尝试：

$(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);
    });
}

Answer 2

试试这个：

（对于每个元素，将延迟增加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>

如何使用addClass和延迟执行此.each（）方法？

2 个答案: