0

.queue() JQuery メソッドの使用方法を学ぼうとしています。そこで、setTimeout のみを使用した基本的なアニメーションから始めました。ここにコードがあります：

http://jsfiddle.net/2gJQS/8/

キューを使用してこの同じアニメーションを実現する方法を考えています。この理由は、将来のすべてのステップを完全にキャンセルする「キャンセル」ボタンをページに追加できるようにしたいからです。今すぐスタートボタンを数回素早く押すとsetTimeoutが重なって変な感じになる。

次のように、各アニメーションを個別にリストしてみました。

$('#target').queue(function(){
    $(this).delay(1000).fadeIn(1000);
    $(this).dequeue();
});

しかし、フェードインとフェードアウトのみが適切なタイミングで発生し、色とテキストの変更は発生しませんでした。そのため、色とテキストの変更のためにキュー関数内に setTimeout を追加しました。これにより、タイミングが機能しました。しかし、私が電話したとき

$('#target').clearQueue();

色とテキストの変更がまだ発生している間、フェードインとフェードアウトを停止しただけです。

私の質問を要約すると：

  1. クリックすると将来のすべてのステップを完全にクリアするキャンセル ボタンを使用しながら、リンクでアニメーションを実現するにはどうすればよいですか?

  2. 1 に対する答えが queue() を使用することである場合、これを正しく行うにはどうすればよいでしょうか (上記の試行の失敗に照らして)。

ありがとう！

4

2 に答える 2

2

関数はアニメーション キューを使用.html()し.css()ません。そのため、.queue()他のアニメーションの間にこれらの呼び出しをスケジュールするために使用.stop(true, true)し、開始ボタンが再度押された場合にキューをキャンセルするために使用する必要があります。

絶対に jQuery アニメーションと混在させないsetTimeoutでください。確実に動作しません。

jQuery アニメーション キューを使用するように修正されたフィドルについては、 http://jsfiddle.net/alnitak/EKNAd/を参照してください。

$('#target').stop(true, true)
    .html("This is one.")
    .css('color', '#000000')
  .fadeIn(1000).fadeOut(2000).queue(function() {
    $(this).html("This is two.").css('color', '#dc0000');
    $(this).dequeue();
}).fadeIn(1000).fadeOut(2000).queue(function() {
    $(this).html("This is three").css('color', '#990099');
    $(this).dequeue();
}).fadeIn(1000).fadeOut(2000);

また、以前にこの関数を投稿して、キューに入れられたかのように任意のjQuery 関数を呼び出すことができるようにしました。

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

これを使用するように書き直された関数については、 http://jsfiddle.net/alnitak/AYMY7/を参照してください。

$('#target')
    .stop(true, true)
    .html('This is one')
    .css('color', '#000000')
    .fadeIn(1000)
    .fadeOut(2000)
    .queued('html', 'This is two')
    .queued('css', 'color', '#dc0000')
    .fadeIn(1000)
    .fadeOut(2000)
    .queued('html', 'This is three')
    .queued('css', 'color', '#990099')
    .fadeIn(1000)
    .fadeOut(2000);
于 2012-09-02T17:00:00.230 に答える
1

多分このようなもの：ここ

HTML :

<div id="holder">
<div id="target" style="display:none"></div>
</div>

<button id="start">Start</button>
<button id="cancel">Cancel</button>

スクリプト:

$(function(){   
    $('#start').click(function(){
        $(this).attr("disabled", "true");
        $("#target").html("This is one.").fadeIn(1000, function(){
            $(this).fadeOut(1000, function(){
                $(this).html("This is two.").css("color","#dc0000").fadeIn(1000, function(){
                    $(this).fadeOut(1000, function(){
                        $(this).html("This is three.").css("color","#990099").fadeIn(1000, function(){
                            $(this).fadeOut(1000, function(){
                                $(this).css("color","#000000");
                                $("#start").removeAttr("disabled");
                            });
                        });
                    });
                });
            });
        });                 
    });

    $("#cancel").click(function(){
        $("#target").stop().empty();
        $("#start").removeAttr("disabled");

    });
});
于 2012-09-02T17:12:19.843 に答える