jQuery.fadeOut() - How to apply sequentially to a set of elements?

Question

I've 'n' buttons

I need to

$('BUTTON').fadeOut();

... but I'd like to see one button at time disappear..

how to ?

I tried using next, but in the following way ALL disappears in one moment

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

I tried to use fadeOut to fadeOut the next, but I've not inital knowledge of total number of buttons.

I tried using $.each() but without success

EDIT:

This is the working solution i choosed:

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

});

Why I downvoted this question: http://meta.stackexchange.com/a/149138/133242 — Matt Ball, Mar 27 '13 at 22:13

T.J. Crowder · Accepted Answer · 2013-03-27T22:26:24.017

6

You can use delay for that:

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

Live Example | Source

That schedules each button to fade out over the course of 450ms, at 500ms intervals.

delay is great for when you're using any of the effects methods. If you ever need to do this with something that isn't part of the effects suite (like hide, for instance), you have to do your own setTimeout:

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

Live Example | Source

edited Mar 27 '13 at 22:26

answered Mar 27 '13 at 22:12

T.J. Crowder

1,031,962
187
1,923
1,875

1

@realtebo: Yeah, `delay` is handy. Only works with the "effects" methods (like `fadeOut`), not with `hide` and such. With `hide` and such you'd have to do the `setTimeout` yourself. – T.J. Crowder Mar 27 '13 at 22:22

score 0 · Answer 2 · answered Mar 27 '13 at 22:13

0

Really basic example, you can chain callback functions:

$("#button1").fadeOut(1000, function(){
    $("#button2").fadeOut(1000, function(){
        $("#button3").fadeOut();
    });
});

answered Mar 27 '13 at 22:13

Alex Osborn

9,831
3
33
44

I've no the total number of element – realtebo Mar 27 '13 at 22:17

Beetroot-Beetroot · Answer 3 · 2013-03-27T22:48:57.527

A generalized cascade avoids having to schedule everything in advance, and is arguably cleaner :

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

This is effectively @AlexOsborn's approach but for a collection of any size.

With a little thought, you could even introduce a mechanism for stopping the cascade in mid stream.

http://jsfiddle.net/zE6nq/

score 0 · Answer 4 · edited May 23 '17 at 10:25

It looks like a jQuery queue can be used for this. Although a queue is normally used to sequentially execute animations for a single element, it appears possible to use one for multiple elements. The trick is to use the queue for the body element, like this:

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

I got this technique from the answer by @schmunk to this question.

Live Demo

jQuery.fadeOut() - How to apply sequentially to a set of elements?

4 Answers4