在创建时动态动画元素

时间:2011-07-21 12:10:40

标签: javascript jquery animation

我想动态创建div,将它们附加到正文并设置jQuery动画。

这是创建元素的地方:

function drawSpot()
{
 var myH1 = document.createElement("div");
 myH1.style.position = "absolute";
 myH1.style.top = GetRandom(0,100)+"%";
 myH1.style.left = GetRandom(0,100)+"%";
 myH1.style.width="40px";
 myH1.style.height="40px";
 $("body").append(myH1);

}

从他们附加到身体的那一刻起,我想开始动画。

4 个答案:

答案 0 :(得分:7)

如果你已经在使用jQuery,那么你应该一直这样做:

$('<div>', {
    css: {
        position:   'absolute',
        top:        GetRandom(0,100)+'%',
        left:       GetRandom(0,100)+'%',
        width:      '40px',
        height:     '40px'
    }
}).appendTo( document.body ).animate({
    left:  '100%'  // for instance
}, 2000);

通过使用.appendTo(),您仍然可以引用原始对象,并能够在其上链接方法。

参考:jQuery constructor.appendTo().animate()

演示http://jsfiddle.net/dkuVu/

答案 1 :(得分:1)

使用jQuery创建元素,并在追加时为其设置动画:

function drawSpot() {
 var myH1 = $("<div>").css({ position: "absolute",
                             top:      GetRandom(0,100)+"%",
                             left:     GetRandom(0,100)+"%",
                             width:    40,
                             height:   40 });
 $("body").append(myH1.animate(...));
}

http://jsfiddle.net/nagCf/

答案 2 :(得分:1)

那应该有用

function drawSpot()
{
   var myH1 = '<div id="newDiv">Some Text</div>';
   $("body").append(myH1);

   $("#newDiv").css({'position' : 'absolute',
                     'top' : GetRandom(0,100)+"%",
                     'left' :GetRandom(0,100)+"%",
                     'width':'40px',
                     'height':'40px' 
                   });

   $("#newDiv").hide().fadeIn(500);
}

答案 3 :(得分:1)

您可以在$(myH1).animate({left:'*randomvalue*', top:'*randomvalue*'},1000);之后使用:append

http://jsfiddle.net/Wumrr/2/