Get La position d'un élément change constamment

Question

J'essayais de créer une sorte d'arrière-plan dans lequel certains nuages ​​bougeaient, mais après avoir fait bouger les nuages, j'ai trouvé que je devais soit les arrêter et revenir quand j'atteindrais la largeur maximale du navigateur ou les faire disparaître. J'essayais d'obtenir leur position mais je n'arrive pas à obtenir tous les postes de façon dynamique. En ce moment (par souci de simplicité) Je suis seulement en utilisant 1 nuage pour tester et je fais ceci:

$(function(){ 

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

}); 

la chose est, cette position n'est pas rafraîchi dynamiquement, il colle avec le premier, il obtient et j'ai essayé de le déplacer à l'intérieur de la boucle while mais ça n'a pas marché ... donc je suis un peu coincé en ce moment ... quelqu'un a une idée de comment je peux y arriver? L'image du nuage est à l'origine placée en haut: 0 à gauche: 0

Answer 1

Je pense que ce code sera utile pour vous.

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

pour toutes les 5 secondes, il vérifie la position d'une classe « nuage », si elle est égale à zéro, il donnera alerte!

pour plusieurs nuages ​​u peut utiliser le code ci-dessous

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

Answer 2

pourquoi ne pas utiliser une image d'arrière-plan en boucle et modifier la propriété css de l'arrière-plan?

edit: Je ne sais pas s'il y a un plugin jquery pour le faire automatiquement, mais il devrait être assez facile dans l'ancien javascript avec setInterval et modulus.

par exemple, votre image de fond est de 400 pixels de large, le css serait:

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

et javascript serait:

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: Testé et de travail (sans jquery) comme

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

évidemment cela devrait changer pour les écouteurs d'événements IE

Answer 3

Est-ce que le code que vous avez publié est une copie directe de ce que vous utilisez? Si c'est le cas, l'appel à animer n'est pas inclus dans la boucle while puisqu'il est coupé par le point-virgule. Essayez d'utiliser des accolades; cela le rend beaucoup plus facile à entretenir et à regarder. :)

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

---

Aussi, je ne pense pas que la boucle sera jamais complète. Aucune des valeurs de ces variables ne change pendant l'itération, donc c'est interminable. Pour que cela fonctionne, vous devrez modifier (mettre à jour) la variable 'p' dans la boucle, à chaque itération.

---

EDIT: En fait, gratter que, la boucle ne commencera pas même parce que elem.position() retourne un objet, pas un nombre (NaN). Pour que cela fonctionne, vous aurez besoin de elem.position().left.

Answer 4

Que diriez-vous:

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

Answer 5

La seule façon de le faire est fiable pour écouter les changements de propriété sur les éléments DOM, en utilisant les événements de mutation DOMAttrModified (par ex.) Et le « onPropertyChange » propriétaire sur IE. Quelqu'un a porté cela à Jquery, voici l'article.

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

Answer 6

Mettez tout cela dans une fonction, disons moveCloud()

Ensuite, utilisez la fonction de rappel de la position animée et appeler cette fonction. Au début de la fonction de vérification de la position du nuage:

-s'il est 0 mouvement vers la droite jusqu'à ce qu'il atteigne maxwidth

-s'il est le maxwidth, déplacez-le vers la gauche jusqu'à ce qu'il atteint 0

Une fois l'animation terminée, le rappel s'exécute et appelle de nouveau la fonction, ce qui déplace le nuage de l'autre côté de l'écran.