0

私のJQueryコードは、whileループを使用してボタンをクリックするだけで複数のdivを作成します。

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

問題は、no_of_divsがたとえば3の場合、3つのdivすべてがページに同時に表示されることです。whileループを削除せずに、どうすればそれらを1つずつ強制的に実行できますか？

4

2 に答える 2

2

.delay()以下のjqueryで遅延できると思います

appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
于 2012-09-25T10:21:01.980 に答える
2

ほんの少しの変更-アニメーションに遅延を追加します...

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

遅延を900 * count900に設定しました。これは、フェードとバウンスの合計アニメーション時間です。その値を試して、好きなように取得してください:)

于 2012-09-25T10:21:27.220 に答える