Question

My JQuery code creates multiple divs on the click of a button using a while-loop.

$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table

    while(count< no_of_divs)
    {

    //code to calculate random x,y coordinates and save them to posx and posy

    var newdivid='div'+count;
    $newdiv = $('<div/>').css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none',
    'background':'ball.png'
    }).appendTo( '.page-wrap' ).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
    count++;
    }
});

The problem is that if the no_of_divs is for eg 3, then all 3 divs appear at the same time on the page. How can I force them to come one by one, without removing the while loop?

Answer 1

Just a slight change – add a delay to the animation…

$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table

    while(count< no_of_divs)
    {

    //code to calculate random x,y coordinates and save them to posx and posy

    var newdivid='div'+count;
    $newdiv = $('<div/>').css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none',
        'background':'ball.png'
    }).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
    count++;
    }
});

I set the delay to 900 * count as 900 is the total animation time for the fade and the bounce. Play about with that value to get it how you like it 🙂