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

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, но это не сработало ... так что я немного застрял на момент ... у кого-нибудь есть идеи как мне этого добиться? Изображение облака изначально установлено сверху: 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

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

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

---

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

---

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

Answer 3

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

edit: я не знаю, есть ли плагин 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

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

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

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

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

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

Answer 5

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

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

http://www.west -wind.com / Weblog / сообщений / 453942.aspx

Answer 6

Как насчет:

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