1

我知道 .delay() 方法，但我相信这只适用于将动画添加到队列中。

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

我希望动画有一个延迟，比如介于 0.3 秒之间，当整个动画完成后，它应该继续循环。动画也应该以“堆叠”的方式开始，这样不是所有的动画都会同时淡入

这是我到目前为止尝试写的，但它不起作用

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

2 回答 2

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);
    });
}
于 2012-07-27T23:00:13.537 回答
0

试试这个：

（对于每个元素，延迟增加 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-27T22:58:07.937 回答