我正在尝试使用 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 可以，但可能不是正确的方法