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() 则不会。我收到一条错误消息

对象 # 没有方法“位置”

对于任何函数，例如 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 回答