jquery - how to queue up a series of css property changes


Tags: javascript,jquery,css,delay,jquery-animate

Problem :

I want to set a series of animation properties - a list of names that are currently invisible but will be marked visible, one right after another, with a set delay of about 100ms between each other. How do I accomplish this with jquery? Essentially, it would be something like this (pseudo-code):

for each $(.item) {
$(this).delay(index*100ms).css({'visibility': 'visible'}
}

The only thing that might compound this, while most of the elements would have the same class, not all of them would, so an animation queue of some sort would work best.



Solution :

You can use .delay() to do this.

$('#foo').slideUp(300).delay(800).fadeIn(400);

When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

You actually want to do one thing to multiple items, so this is how I'd do that:

$.each($(".a"), function(index, value) {
    $(this).delay(index*400).fadeOut(400);
});

You were on the right track with your pseudocode, you need to offset each animation by index * someTime.

Turns out, .delay() actually doesn't work with css() so here's an updated solution:

$.each($(".a"), function(index, value) {
    $(this).delay(index*400).queue( function(next){ 
        $(this).css('visibility','visible'); 
        next(); 
      });
});

demo


    CSS Howto..

    How to detect if html contains block level elements using jQuery?

    How to convert complex xpath to css

    How to use CSS with javascript

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS

    How to create both-sided dotted line around a title? [duplicate]

    How to add CSS stylesheet to aspx.vb table

    How to hide a parent div if an inner div has a certain class, with javascript

    How do I overlap PNG images for a “build your own t-shirt” product display page - javascript/css/asp

    How can I set all columns to be the same height? [duplicate]

    How to center this input using css only

    How can I apply a vertical scrollbar to a div with a percentage height?

    How to make the content div scrollable without using javascript

    How can I make my div to remain fixed and no longer change position?

    How to highlight the menu item for the sort type of data on the page?

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to change H3 color in bootstrap using CSS file

    How to increase the duration of :active in css?

    How do I position divs inside header?

    How can I change the css properties of a google visualization table and it columns?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to create an opacity fade()? ( improvement over jQuery)

    How to change width of object in mobile version

    How to get div columns to be same height?

    How to manipulate SVG element style with javascript?

    How is padding-top as a percentage related to the parent's width?

    how to make an image “coming” to foreground

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    How to offset div columns in CSS grid system

    How to cancel an upstream CSS declaration?

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)