如何在JQuery中使用.class生成動畫？

我可以動畫#ID Div標籤來移動，但我不能調用.class Div標籤來移動。我如何正確地做到這一點？如何在JQuery中使用.class生成動畫？

.myClass { 
       width: 40px; height: 40px;float:left;padding: 1px; margin:3px; 
       position:absolute; left:50px; top:60px; background:blue; color:white; 
      }

在HTML：

<div class="myClass">Insert image2</div> 
<div class="myClass"><img src="jef-frog.gif"width="50">DIV myCLASS</img></div> 

function randomRange(min,max) { 
       return Math.random() * (max-min) + min; 
      } 

      /* Generate some random starting position */ 
      var startmyClassX = randomRange(50,100); 
      var startmyClassY = randomRange(50,100); 

var item2 = $(".myClass"),cycle1; 

function runItem2() { 
       /* Set a the starting position to be random by editing the css */ 
       $(".myClass").css("left", startItem2X+"px"); 
       $(".myClass").css("top", startItem2Y+"px"); 
       $(".myClass").svg(onLoad); 

       (cycle2 = function() { 
       var m = randomRange(50,100); 
       var n = randomRange(75,150); 
       myClass.animate({top:'+='+m, left:'+='+n},2000); 
       myClass.animate({left:'-='+n},2000); 
       myClass.animate({left:'+='+n, top:'-='+n},2000); 
       myClass.animate({left:'-='+n},2000) 
       myClass.animate({top:'+='+m},2000,cycle2) 

       })(); 

      } 

runItem2();

任何人都可以幫助解決這個問題？由於

來源

2012-05-23 Lucas Li

你的代碼有很多語法錯誤。什麼是'startItem2X'？什麼是'svg'插件？ – undefined

startItem2X我嘗試設置圖像的X位置 –

Patrick，但是當我嘗試爲我的DIV ID標籤設置動畫時......它確實會移動。請參閱演示>> http://jsfiddle.net/cHStS/ –

你有一個變量var item2 = $(".myClass")，但隨後在後面的代碼，你應該使用item2您使用myClass：

myClass.animate({top:'+='+m, left:'+='+n},2000); 
... 
myClass.animate({top:'+='+m},2000,cycle2)

要麼變量重命名爲myClass或更改後的代碼使用item2。（你也聲明的變量cycle1再後來使用cycle2。）

請注意，您提供給.animate() method回調將每一次元件被動畫與$(".myClass")匹配你將是兩個元素調用，所以每次重新啓動循環時，將動畫的數量加倍。

還要注意的是，在您的演示你有兩件事情獨立移動，但如果你從一個動畫功能動畫與同一類別的所有元素，然後所有元素將移動相同的方式。

來源

2012-05-23 06:06:05 nnnnnn

如何在JQuery中使用.class生成動畫？

回答

相關問題