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 に答える