Получить положение элемента, постоянно меняющегося

Question

Я пытался создать своего рода фон, на котором движутся облака, но после того, как облака начали двигаться, я обнаружил, что мне нужно либо заставить их останавливаться и возвращаться при достижении максимальной ширины браузера, либо заставить их исчезнуть.Я пытался получить их позицию, но мне не удалось получить все позиции динамически.Сейчас (для простоты) я использую для тестирования только одно облако и делаю это:

$(function(){

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

});

дело в том, что эта позиция не обновляется динамически, она придерживается первой полученной позиции, и я попытался переместить ее внутри цикла while, но это не сработало... так что я как бы застрял на данный момент. ..у кого-нибудь есть идеи, как я могу этого добиться?Изображение облака изначально установлено вверху:0 слева:0.

Answer 1

Я думаю, этот код будет вам полезен. Попробуйте!

$('.clouds').animate({ top:0},{queue:false, duration:90000});
setInterval(function(){
if($(".clouds").position().top==0) alert("Rain");
},5000)

каждые 5 секунд он будет проверять положение «облачного» класса, если оно равно нулю, он выдаст предупреждение!

для нескольких облаков вы можете использовать код ниже

 setInterval(function(){
if($(".clouds").position().top==0){
    $(".clouds").each(function(){
        if($(this).position().top==0) $(this).remove();
    });
}
},1000) 

Answer 2

Является ли код, который вы опубликовали, прямой копией того, что вы используете?Если да, то вызов анимации не включается в цикл while, поскольку он прерывается точкой с запятой.Попробуйте использовать фигурные скобки;это значительно облегчает обслуживание и просмотр.:)

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

---

Кроме того, я не думаю, что этот цикл когда-либо завершится.Ни одно из значений этой переменной не меняется во время итерации, поэтому она бесконечна.Чтобы это работало, вам нужно будет изменить (обновить) переменную «p» внутри цикла на каждой итерации.

---

РЕДАКТИРОВАТЬ:На самом деле, зачеркните это, цикл даже не начнется, потому что elem.position() возвращает объект, а не число (NaN).Чтобы это заработало, вам понадобится elem.position().left.

Answer 3

почему бы не использовать циклическое фоновое изображение и не изменить свойство CSS-позиции фона?

редактировать:Я не знаю, есть ли плагин jquery для автоматического выполнения этого, но в старомодном javascript с setInterval и модулем это должно быть достаточно просто.

Например, ваше фоновое изображение шириной 400 пикселей, CSS будет:

body { 
    background: transparent url(yourbackground.png) repeat-x scroll 0 0;
}

и javascript будет:

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    $('body').css("background-position", (-1 * BGPosition) + "px 0px");
}

var si = setInterval(scrollBodyBG,100)

Редактировать:Протестировано и работает (без jquery) как

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    document.body.style.backgroundPosition = (-1 * BGPosition) + "px 0px";
}

document.addEventListener("DOMContentLoaded",function() { setInterval(scrollBodyBG,100);},false);

очевидно, это нужно будет изменить для поддержки прослушивателя событий IE

Answer 4

Как насчет:

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

Answer 5

Единственный способ сделать это надежно — прослушивать изменения свойств элементов DOM, используя события мутации DOMAttrModified (например) и собственный «onpropertychange» в IE.

Кто-то портировал это на Jquery, вот статья.

http://www.west-wind.com/Weblog/posts/453942.aspx

Answer 6

Поместите все это в функцию, скажем, moveCloud().

Затем используйте обратный вызов анимированной позиции и вызовите эту функцию.В начале функции проверяем положение облака:

-Если это 0, переместите его вправо, пока он не достигнет максимальной ширины.

-Если это максимальная ширина, переместите ее влево, пока она не достигнет 0.

Как только анимация завершена, обратный вызов выполняется и снова вызывает функцию, которая переместит облако на другую сторону экрана.