0

我可以动画#ID Div 标签来移动，但我不能调用 .class Div 标签来移动。我怎样才能正确地做到这一点？

.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();

任何人都可以帮助解决这个问题？谢谢

4

1 回答 1

1

您有一个变量var item2 = $(".myClass")，但稍后在您应该使用的代码中item2使用myClass：

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

将变量重命名为myClass或将后面的代码更改为使用item2. （您还声明了一个变量cycle1，然后使用cycle2.）

请注意，您提供给该.animate()方法的回调将在每个动画元素调用一次，因此通过$(".myClass")匹配两个元素，您将在每次重新启动循环时将动画数量加倍。

另请注意，在您的演示中，您有两个独立移动的东西，但是如果您使用该动画函数中的同一类为所有元素设置动画，那么所有元素将以相同的方式移动。

于 2012-05-23T06:06:05.430 回答