-1

我有'n'按钮

我需要

$('BUTTON').fadeOut();

...但我希望看到一个按钮一次消失..

如何 ？

我尝试使用下一个，但以下方式 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);
});

实例| 来源

这会安排每个按钮在 450 毫秒的过程中以 500 毫秒的间隔淡出。

delay非常适合您使用任何效果方法时。如果您需要使用不属于效果套件的东西（例如hide，例如）来执行此操作，您必须自己做setTimeout：

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

实例| 来源

于 2013-03-27T22:12:33.420 回答
0

非常基本的示例，您可以链接回调函数：

$("#button1").fadeOut(1000, function(){
    $("#button2").fadeOut(1000, function(){
        $("#button3").fadeOut();
    });
});
于 2013-03-27T22:13:28.623 回答
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

看起来可以为此使用 jQuery 队列。尽管队列通常用于为单个元素顺序执行动画，但似乎可以将一个队列用于多个元素。诀窍是使用 body 元素的队列，如下所示：

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

我从@schmunk 对这个问题的回答中得到了这种技术。

现场演示

于 2013-03-27T22:53:38.010 回答