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()メソッドに提供するコールバックは、アニメーション化される要素ごとに 1 回呼び出されることに注意してください。そのため、$(".myClass")2 つの要素が一致すると、サイクルを再開するたびにアニメーションの数が 2 倍になります。

また、デモでは 2 つのものが独立して動いていますが、その 1 つのアニメーション関数から同じクラスですべての要素をアニメーション化すると、すべての要素が同じように動くことに注意してください。

于 2012-05-23T06:06:05.430 に答える