Holen Position eines Elements ständig ändernden

Question

Ich habe versucht, eine Art von Hintergrund zu machen, in der einige Wolken bewegen sich, aber nachdem ich die Wolken bekam bewegend fand ich, dass ich entweder soll sie aufhören machen und zurück, wenn der Browser des maximale Breite zu erreichen, oder sie verschwinden zu lassen. Ich habe versucht, ihre Position zu bekommen, aber ich kann nicht verwalten dynamisch alle Positionen zu erhalten. Im Augenblick (aus Gründen der Einfachheit) Ich bin nur mit 1 Wolke zu testen und ich dies tun:

$(function(){

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

});

die Sache ist, diese Position nicht dynamisch aktualisiert wird, klebt es mit dem ersten bekommt man es und ich habe versucht, es in der while-Schleife zu bewegen, aber es hat nicht funktioniert ... also bin ich irgendwie stecken an der Moment ... hat jemand eine Idee, wie ich das erreichen kann? Das Bild der Wolke ist ursprünglich oben gesetzt: 0 links: 0

Answer 1

Ich denke, dieser Code nützlich sein wird, dies u.Try aus!

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

für alle 5 Sekunden wird es für die Position einer „Wolke“ Klasse prüfen, ob es Null ist, wird es Alarm geben!

für mehrere Wolken u kann unter Code verwenden

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

Answer 2

Ist der Code, den Sie haben eine direkte Kopie geschrieben, was Sie verwenden? Wenn ja, dann wird der Anruf zu animieren nicht in der while-Schleife enthalten, da sie durch das Semikolon kurz geschnitten wird. Versuchen Sie geschweifte Klammern zu verwenden; es macht es viel einfacher zu warten und zu sehen. :)

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

---

Auch ich glaube nicht, dass Schleife wird immer abgeschlossen. Keines dieser Variablenwerte ändern sich während der Iteration so ist es kein Ende. Damit es müssen Sie ändern (Update), um die ‚p‘ Variable innerhalb der Schleife zu arbeiten, bei jeder Iteration.

---

EDIT: Eigentlich kratzen, dass, wird die Schleife nicht einmal beginnen, weil elem.position() gibt ein Objekt, keine Zahl ( NaN ). Damit es funktioniert Sie benötigen elem.position().left .

Answer 3

warum nicht ein Looping Hintergrundbild und die background-position CSS-Eigenschaft ändern?

bearbeiten. Ich weiß nicht, ob es eine jQuery-Plugin dies automatisch zu tun, aber es sollte mit setInterval und Modul in altmodischer Javascript leicht genug sein,

zum Beispiel Hintergrundbild ist 400 Pixel breit, die CSS wäre:

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

und Javascript wäre:

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

var si = setInterval(scrollBodyBG,100)

Edit: Getestet und funktioniert (ohne jquery) als

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

offensichtlich diese müßten für IE-Ereignis-Listener Unterstützung ändern

Answer 4

Wie wäre:

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

Answer 5

Der einzige Weg, dies zuverlässig zu tun ist, Eigenschaftsänderungen auf DOM-Elementen zu hören, Mutationsereignis DOMAttrModified (zB.) Verwenden und den proprietären „onpropertychange“ auf IE.

Jemand dies zu JQuery portiert, hier ist der Artikel.

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

Answer 6

alles in einer Funktion Setzen Sie, sagen wir mal moveCloud ()

Dann den Rückruf der belebten Position verwenden und diese Funktion aufrufe. Zu Beginn der Funktion überprüfen Sie die Position der Wolke:

-Wenn es ist 0 Bewegung nach rechts, bis er maxwidth erreicht

-Wenn es die maxwidth ist, nach links bewegen, bis er 0 erreicht

Sobald die Animation erfolgt, der Rückruf ausführt, und fordert erneut die Funktion, die die Wolke auf die andere Seite des Bildschirms bewegen wird.