获取不断变化的元素的位置

Question

我试图使一些云在其中移动，但是当我使云移动之后，我发现我应该使它们停止并在达到浏览器的最大宽度时返回，或者使它们消失。我试图获得他们的职位，但我无法动态获得所有职位。现在（为简单起见），我仅使用1个云进行测试，我这样做：

$(function () {
    var p = $('.clouds').position();
    var w = $("#sky").width();
    while (p < w);
    $('.clouds', this).stop().animate({ left: "+=50000px" }, { queue: false, duration: 90000 });
});

事实是，该位置不会动态刷新，它与它获得的第一个位置保持一致，我试图将其移动到while循环内，但是它没有用...所以我有点卡在了片刻...任何人都知道如何实现这一目标？云的图像最初设置在top：0 left：0

Answer 1

我认为此代码对您有用。试试看！

$('.clouds').animate({ top: 0 }, { queue: false, duration: 90000 });

setInterval(function () {
    if ($(".clouds").position().top == 0) alert("Rain");
}, 5000);

Answer 2

您发布的代码是您正在使用的代码的直接副本吗？如果是这样，则动画调用不包含在while循环中，因为它已用分号隔开。尝试使用花括号；它使维护和查看变得更加容易。 ：）

Answer 3

为什么不使用循环背景图像并修改背景位置css属性？

Answer 4

怎么样：

 while($('.clouds').position().left < $("#sky").width())
 {
       // do stuff
 }

Answer 5

可靠地做到这一点的唯一方法是，使用DOMAttrModified突变事件（例如）和IE上专有的“ onpropertychange”来监听DOM元素的属性更改。

有人将其移植到Jquery，这是文章。

Answer 6

将其全部放入函数中，例如moveCloud（）

然后使用动画位置的回调并调用该函数。在功能开始时，检查云的位置：