Ottenere la posizione di un elemento in continua evoluzione

Question

Stavo cercando di fare una sorta di sfondo in cui alcune nuvole si muovevano, ma dopo che ho ottenuto le nuvole che si muovono ho scoperto che avrei dovuto neanche farli smettere e tornare al raggiungimento larghezza massima del browser, o farli sparire. Stavo cercando di ottenere la loro posizione, ma non riesco a ottenere tutte le posizioni in modo dinamico. In questo momento (per semplicità) che sto usando solo 1 cloud per testare e io fare questo:

$(function(){

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

});

la cosa è, che la posizione non è dinamicamente aggiornato, si attacca con il primo che ottiene e ho cercato di spostarlo all'interno del ciclo while, ma non ha funzionato ... così mi sono un po 'bloccato a il momento ... qualcuno ha un'idea di come posso raggiungere questo obiettivo? L'immagine della nuvola è originariamente impostato in alto: 0 a sinistra: 0

Answer 1

Credo che questo codice sarà utile a u.Try questo fuori!

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

per ogni 5 secondi si controlla per la posizione di una classe "nuvola", se è pari a zero darà avviso!

per più nuvole u possibile utilizzare sotto codice

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

Answer 2

è il codice che hai postato una copia diretta di ciò che si sta utilizzando? Se è così, allora la chiamata ad animare non è incluso nel ciclo while dal momento che è tagliato corto dal punto e virgola. Cercate di usare le parentesi graffe; lo rende molto più facile da mantenere e guardare. :)

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

---

Inoltre, non penso che il ciclo sarà mai completa. Nessuno dei valori di quelle variabili stanno cambiando durante l'iterazione quindi è senza fine. Al fine di farlo funzionare è necessario modificare (aggiornamento) la variabile 'p' all'interno del ciclo, ad ogni iterazione.

---

EDIT: In realtà, graffiare che, il ciclo non sarà nemmeno iniziare perché elem.position() restituisce un oggetto, non un numero ( NaN ). Per farlo funzionare è necessario elem.position().left .

Answer 3

perché non utilizzare un'immagine di sfondo loop e modificare la proprietà background-position css?

modifica:. Non so se c'è un plugin jQuery per farlo automaticamente, ma dovrebbe essere abbastanza facile in vecchio stile con javascript setInterval e modulo

Ad esempio, l'immagine di sfondo è larga 400 pixel, il css potrebbe essere:

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

e JavaScript sarebbe:

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

var si = setInterval(scrollBodyBG,100)

Modifica: Testato e funzionante (senza jquery) come

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);

ovviamente questo avrebbe bisogno di cambiare per il supporto listener di eventi IE

Answer 4

Come su:

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

Answer 5

L'unico modo per farlo in modo affidabile è quello di ascoltare i cambiamenti di proprietà su elementi DOM, utilizzando gli eventi di mutazione DOMAttrModified (ad es.) E la "onpropertychange" proprietario su IE.

Qualcuno portato questo a jQuery, ecco l'articolo.

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

Answer 6

Mettere il tutto in una funzione, diciamo moveCloud ()

Quindi utilizzare il callback della posizione animato e chiamare tale funzione. All'inizio della funzione di controllare la posizione della nube:

-Se è 0 mossa verso destra fino a raggiungere maxwidth

-Se è il maxwidth, spostare verso sinistra fino a raggiungere 0

Una volta che l'animazione è fatto, il callback esegue e invita nuovamente la funzione, che si muoverà la nube verso l'altro lato dello schermo.