Mój kod JQuery tworzy wiele divów po kliknięciu przycisku za pomocą pętli while.

$(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++;
    }
});

Problem w tym, że jeśli no_of_divs to np. 3, to wszystkie 3 divs pojawiają się na stronie w tym samym czasie. Jak mogę zmusić je, aby przychodziły jeden po drugim, bez usuwania pętli while?

0
soundswaste 25 wrzesień 2012, 14:18

2 odpowiedzi

Najlepsza odpowiedź

Tylko drobna zmiana - dodaj opóźnienie do animacji...

$(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++;
    }
});

Ustawiłem opóźnienie na 900 * count, ponieważ 900 to całkowity czas animacji dla zanikania i odbijania. Baw się tą wartością, aby uzyskać to, co lubisz :)

2
Reinstate Monica Cellio 25 wrzesień 2012, 14:21

Myślę, że możesz opóźnić przez jquery .delay() poniżej

appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
2
NullPoiиteя 25 wrzesień 2012, 14:21