0

jQueryを使用してページ全体で雲をアニメーション化し、左端から外れたらページの最後に移動しようとしています。

<div class="sprite cloud" id="cloud-1"> </div>

 

$(function () {
   function runIt() {

   $(".cloud").each(function(){

       var speed = 20;
       var Position = this.position().left;
       var Width =  this.width();
       if((Position + Width) < 0) 
       {
           Position = $(document).width();
           this.css("left", Position);
       }

   });

  $('#clouds').animate({"left": Position-speed},1000, "linear", runIt)}
   runIt();
});

$('#cloud-1') などを使用すると機能しますが、each() を使用しようとすると機能しません。というエラーが表示されます

オブジェクト # にはメソッド 'position' がありません

offset() など、どの関数でも同じエラーが発生します。

this の代わりに $(this) で解決しました。

新しいコード:

$(function () {
   function runIt() {

   $(".cloud").each(function(){

   var speed = 20;
   var cloudPosition = $(this).position().left;
   var cloudWidth =  $(this).width();

   if((cloudPosition + cloudWidth) < 0) 
   {
       cloudPosition = $(document).width();
       $(this).css("left", cloudPosition);
   }

    $(this).animate({"left": cloudPosition-speed},1000, "linear", runIt)

    });


}

  setInterval(runIt, 1000)
});

今は一度だけアニメーションします。runIt コールバックがループ内にあるためだと思います。ループの外に移動しようとしましたが、うまくいきませんでした。setInterval の使用は問題なく動作しますが、おそらく適切な方法ではありません

4

1 に答える 1

4

.positionは jQuery オブジェクトのメソッドで、this内部eachは DOM オブジェクトです。

使用する必要があります$(this).position

widthと についても同じcss

于 2013-02-22T13:27:26.800 に答える