Question

我可以设置#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();

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

Answer 1

您有一个变量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")匹配两个元素，每次重新启动时动画的数量都会加倍循环。

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

如何在JQuery中使用.class进行动画处理？

1 个答案: