4

アニメーション シーケンスの完了後に Deferreds を使用してコールバックを実行する方法を決定するのに問題があります。1 つだけをアニメーション化する場合.promise()は、アニメーション/フェード/スライドの最後で使用できることはわかっていますが、複数のものをアニメーション化しようとすると、どのように操作すればよいかわかりません。

これまでの私のコードは次のとおりです。

var delayTime = 0;
$stack = $('li'); // returns five list items.
$stack.each(function(index, element) {
    $(element).delay(delayTime).animate({ opacity: 0.3 }, 500, function() {
        $(element).animate({ opacity: 1 }, 500);
    });
    delayTime += 1250;
});

すべての要素が連続してフェードインおよびフェードアウトした後、最後にコールバックを実行したいと思います。

4

2 に答える 2

1 
<script src="js/jquery/jquery-1.7.1.js"></script>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    $(function() {
        var delayTime = 0;
        var $stack = $("li");
        $stack.each(function(index, element) {
            $(element)
                .delay(delayTime)
                .animate({ opacity: .3 }, 500)
                .animate({ opacity: 1 }, 500);
            delayTime += 1250;
        }).promise().done(function() {
            $stack.parent().append("<li>Hello!</li>");
        });
    });
</script>
于 2012-04-21T11:51:10.623 に答える
0

カスタム関数キューを設定するデフォルトの jQuery の方法は次のとおりです。

articleDiv.queue("createPages",function(next){articleDiv.html(loader);next()});//step 1
articleDiv.delay(800,"createPages");//add delay after step 1
articleDiv.queue("createPages",function(next){articleDiv.html(content);next()});//step 2
articleDiv.delay(800,"createPages");//add delay after  step2
articleDiv.dequeue("createPages");//process the entire queue

いくつかの基本ルール: 上記の例の articleDiv は var articleDiv=$('#the_container_of_the_animation') であり、createPages は作成するキューの名前です。それがかなりカバーされることを願っています。

于 2012-04-21T12:25:46.717 に答える