CODEWITHSUNDEEP
jqueryjquery-ui
greycode
greycode

Reputation: 113

Slide down one at a time

So I know there are multiple questions like this, but I think this is a bit unique... Here is what is my code first of..

<div class="holster_infobox_helper">

        <div id="infobox_holder">
            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/access_point.png">Alerts</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                    <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>

            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/hammer.png">Jobs</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>
        </div>

    </div>

I have a small snippet, 

$(".infobox_alert").delay(2500).slideDown(1000);

That makes all of the .infobox_alert

's drop down at once. I'd like to have each one from each "infobox" drop down one by one. Starting from the first infobox, one two three, then the next infobox, one two three, then the next. So it opens one by one per box, then onto the next, one by one.

Upvotes: 0

Views: 1079

Answers (3)

Coin_op
Coin_op

Reputation: 10718

One way to do this would be to use the callback of each slide down in a recursive function.

Create a function that slides down the next one:

var slideDownNext = function(element){
    element.next().slideDown( function(){ slideDownNext($(this)) } );
}

Then attach that to the first element:

$(".infobox_alert:first").slideDown( function(){ slideDownNext($(this)) } );

As mentioned in the other answers you could use a timeout/delay to stagger the sliding, but that is not going to guarantee that the next one doesn't open before the previous one has finished. Even if you set the time of the animation to be the same as the delay other things can happen that might make the next animation start before the previous one has finished.

Update: I hadn't fully looked at the html in the question and assumed all elements were siblings. As that is not the case a solution like this should wok better:

var alerts = $('.infobox_alert')
function slideNext(i){
    alerts.eq(i).slideDown( function(){ slideNext(++i); } );
}
alerts.eq(0).slideDown( function(){ slideNext( ++i ); } );

Upvotes: 0

XCS
XCS

Reputation: 28147

Use recursivity:

slideIt(0);

function slideIt(i){
   var el =$(".infobox_alert:eq("+i+")");
   if(el == undefined) 
       return;
   el.slideDown(1000);
   setTimeout(function(){slideIt(++i)}, 1000);
}

DEMO: http://jsfiddle.net/Yjnny/

Upvotes: 1

John Koerner
John Koerner

Reputation: 38077

If you use the each method, you can delay the amount of time the slidedown takes:

var i = 0;
$(".infobox_alert").each(function () {
  $(this).delay(1000*i).slideDown(1000);
  i++;
});

The nice thing about this apporach over chaining on the complete event is that you can stagger them out by adding to the delay or shorten the delay. If you shorten it, they come down in order, but don't wait until the previous one is completely done sliding to start their sliding. Try playing with the delay until you get the desired effect.

Example fiddle: http://jsfiddle.net/MKKbj/

Upvotes: 3

Related Questions