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 循环的情况下强迫它们一一出现？

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 * count为 900 是淡入淡出和反弹的总动画时间。玩弄该值以获得您喜欢的方式:)

于 2012-09-25T10:21:27.220 回答