動態創建動畫元素

Question

我想動態創建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); 

} 

並從他們被附加到身體的時候，我要開始動畫。

Answer 1

如果你已經使用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/

Answer 2

使用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/

Answer 3

這應該工作

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); 
} 

Answer 4

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

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