ansaurus

Question

How to show each div, one by one on jquery?

Answer 1

+1 A:

You could use something like this:

$(function() {
    // Start showing the divs
    showDiv();
});

function showDiv() {
    // If there are hidden divs left
    if($('div:hidden').size() > 0) {
        // Fade the first of them in
        $('div:hidden:first').fadeIn();
        // And wait one second before fading in the next one
        setTimeout(showDiv, 1000);
    }
}

That find the next hidden div and fade it in every second. Just hide the divs you want to show using CSS's display: none; beforehand.

If you for some weird reason have to use the each function, this might work.. kinda.

$(function() {
    $('div:hidden').each(function(index) {
        setTimeout(function(el) {
            el.fadeIn();
        }, index * 1000, $(this));
    });
});

Tatu Ulmanen 2010-01-31 20:45:25

liked this one :Dcan you use $.each() jQuery function please?

CuSS 2010-01-31 20:51:40

Why would you have to use the `each` function if this works? You can do everything you can do in an `each` loop inside the `showDiv` function also. `Each` just complicates things.

Tatu Ulmanen 2010-01-31 20:53:23

i know how to do with the each function, but i can't do it because i need to do it children by children, and i don't know how to do it. thanks for your answer :D

CuSS 2010-01-31 20:56:00

i have to use each to do the children by children process, for example, we have a div inside a div that is inside other div, i wan't to make it by order. thanks for the sympathy

CuSS 2010-01-31 21:04:07

You're welcome for my sympathy. I added an example that uses `each`, perhaps that's what you're looking for? Both methods should traverse the DOM tree in correct order, using `each` doesn't matter as it is the `$()` part that does the fetching.

Tatu Ulmanen 2010-01-31 21:06:40

it doesn't work for me :s , it call's the function, one by one, but the div's doesn't do the effectEDIT: THANKS, it's working now :D

CuSS 2010-01-31 21:12:39

You could also use the animation completion callback of `fadeIn` instead of `setTimeout` like this: `$('div:hidden:first').fadeIn(500, showDiv);`

Michael Kessler 2010-02-01 00:15:47

It (`$('div:hidden:first').fadeIn(500, showDiv);`) could, even, be the only line in the `showDiv` function.

Michael Kessler 2010-02-01 00:22:54

@Michael, that's true but it would cause the divs to fire right after each other. In my example, the animation is 500ms-ish and the interval 1000ms, so there's a pause of 500ms after every fade in.

Tatu Ulmanen 2010-02-01 06:18:15

i tried your script on FF 3.5 and it works like a charm, but on IE 7, it takes a break with coffee :/it hides everything, but it doesn't show anything. :/

CuSS 2010-02-01 10:25:16

Answer 2

A:

Try the next code:

$('div').hide().each(function(index, domElement) {
      $(this).slideDown("slow");
      // Wait for the end of the animation somehow...
    })

Michael Kessler 2010-01-31 20:49:38

it do all the divs in the same time, doesn't do the children by children effect. thanks for your answer.

CuSS 2010-01-31 20:58:58

I know that. That's why I wrote the `// Wait for the end of the animation somehow...` line. I provided you the jquery (the main part) - now add your JS for waiting half a second after each div appearance...

Michael Kessler 2010-01-31 23:34:53

I see that the wait/sleep in JS is impossible. It leaves us with the accepted answer. Notice my additions for that answer...

Michael Kessler 2010-02-01 00:24:13

ansaurus

tags:

views:

answers:

How to show each div, one by one on jquery?

related questions