Question

我的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循环的情况下强制它们一个接一个地来？

Answer 1

我认为您可以通过下面的.delay()延迟

appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);

Answer 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是淡入淡出和反弹的总动画时间。玩这个值来得到它你喜欢它：）

Jquery：分别创建多个div

2 个答案: