-1

私は「n」個のボタンを持っています

する必要がある

$('BUTTON').fadeOut();

...しかし、一度に1つのボタンが消えるのを見たい..

方法 ？

nextを使ってみたのですが、以下の方法でALLが一瞬で消えます

$(".genresButton").first().fadeOut().next().fadeOut()  ;

次のfadeOutにfadeOutを使用しようとしましたが、ボタンの総数について最初の知識がありませんでした。

$.each() を使用してみましたが、成功しませんでした

編集：

これは私が選んだ実用的なソリューションです:

$("body").on('click', '.genresButton',  function(event) {
    $(".genresButton").not($(this)).each(function(index){
        $(this).delay(index * 500).fadeOut(450);
    });

});
4

4 に答える 4

6

そのために使用できますdelay：

$('BUTTON').each(function(index) {
    $(this).delay(index * 500).fadeOut(450);
});

実例| ソース

これにより、各ボタンが 500 ミリ秒間隔で 450 ミリ秒にわたってフェードアウトするようにスケジュールされます。

delayいずれかのエフェクト メソッドを使用している場合に最適です。エフェクト スイートの一部ではないもの (hideたとえば など) でこれを行う必要がある場合は、独自に行う必要がありますsetTimeout。

$('BUTTON').each(function(index) {
    var btn = $(this);
    setTimeout(function() {
        btn.hide();
    }, index * 500);
});

実例| ソース

于 2013-03-27T22:12:33.420 に答える
0

これにはjQueryキューを使用できるようです。キューは通常、1 つの要素のアニメーションを順次実行するために使用されますが、複数の要素に対して 1 つを使用することも可能です。秘訣は、次のように body 要素にキューを使用することです。

$('button').each(function() {
    var $button = $(this);
    $('body').queue(function() {
        $button.fadeOut(450, function() { $('body').dequeue(); });
    });
});

@schmunk によるこの質問への回答から、この手法を取得しました。

ライブデモ

于 2013-03-27T22:53:38.010 に答える
0

一般化されたカスケードは、すべてを事前にスケジュールする必要がなく、ほぼ間違いなくクリーンです。

function seqFadeOut(jq, i) {
    jq.eq(i).fadeOut(function() {
        seqFadeOut(jq, i+1);
    });
}
seqFadeOut($(".genresButton"), 0);//start the cascade

これは事実上 @AlexOsborn のアプローチですが、任意のサイズのコレクションを対象としています。

少し考えれば、カスケードを途中で停止するメカニズムを導入することもできます。

http://jsfiddle.net/zE6nq/

于 2013-03-27T22:39:01.063 に答える
0

本当に基本的な例ですが、コールバック関数をチェーンできます:

$("#button1").fadeOut(1000, function(){
    $("#button2").fadeOut(1000, function(){
        $("#button3").fadeOut();
    });
});
于 2013-03-27T22:13:28.623 に答える