Sujet : Ecouter et récupérer la position d'un élément en mouvement par .animat

Bonjour à tous,


Voilà peu de temps je suis passé à jquery et j'aimerai relever la position d'une élément (div) HTML ayant une class.

Pour être plus précis :

  • lorsque l'on appuie sur une touche CTRL il appel la fonction tireCanonAmi() (point 5)

  • la fonction tireCanonAmi() va ajouter par un élément div ayant une class .tireLaser dans le document principale #zoneGame

  • on lui attribue des propriétés css avec .css()

  • on lui attribue une méthode .animate() lui donnant un déplacement vers le haut jusque -35px

Jusque là tout est ok et cela fonctionne très bien.

Mais comment puis-je connaitre en temps réel la position Top de la div qui viens juste d’être animée par la méthode .animate() sans faire planter le navigateur ?

J'ai essayé avec un setInterval() mais setInterval() continue après que le Laser aie passer la coordonnée Top -35 !
L' écoute avec setInterval() continue et est relancée à chaque tire vu que l'événement clavier entraine l'appel de la fonction et donc setInterval() par la même occasion.

Içi j'ai virer mon code contenant setInterval() vu que cela fait planter le navigateur qui est ralentit de plus en plus jusque à se planter car avec ce setInterval() qui ne se stoppe pas je suis dans une boucle infinie.


$(function(){
 
// 1.  Délimitation de la zone
    $("body").css({width: '1200px', backgroundColor: '#F9BBBB', margin: '10px auto'});
 
// 2. Elément zoneGame  (zone totale du jeux et délimitation de la taille de la zone
    $("body").append('<div id="zoneGame"></div>');
    $("#zoneGame").css({width: '892px', height: '768px', position: 'relative', margin: '5px auto', backgroundColor: '#000', borderBox: "2px solid #555", opacity: '0.9'});
 
// 3. Elément Mobile (le canon ami)
    $("#zoneGame").append('<div id="canon"></div>');
    $("#canon").css({position: "absolute", top: 660, left: 426, width: "40px", height: "24px", backgroundImage: "url('img/ami/40x24/canon.png')"});
 
// 4. Événements clavier
    $(document).keydown(function(e){                        // on place un écouteur sur le document
        if(e.which == 37){                            // touche de déplacement vers la gauche
            canonX = parseInt($('#canon').css('left'));    
                if(canonX > 4){                        // extrémité gauche de canon à > que 4 
                    $('#canon').css('left',canonX -= 8);        // step de déplacement du canon
                }
        }       
        if(e.which == 39){                            // touche de déplacement vers la droite
            canonX = parseInt($('#canon').css('left'));
                if(canonX < 848){                    // extrémité gauche de canon à < que 626
                    $('#canon').css('left',canonX += 8);            // step de déplacement du canon
                }
        }
        if(e.which == 17){                            // si touche CTRL pressée
            tireCanonAmi();                            // appel la fonction tireAmi
        }
    });
 
//5. Fonction tireLaser (le missile)
        function tireCanonAmi(){
            $("#zoneGame").append('<div class="tireLaser"></div>'); // on ajoute l'élément
 
            // on écoute la position du canon et on met les coordonnées dans des variables pour ensuite faire partir le missile au bout du canon
            var posiCanonLeft =  parseInt($('#canon').position().left) + 18;    // origine 316 (40-4)/2=18  missile fait 4px en width
 
                        // propriétés de l'élément tireLaser
            $("#zoneGame .tireLaser").css({width: "4px", height: "16px", position: "absolute", top: 630, left: posiCanonLeft, backgroundImage: "url('img/ami/40x24/missile-ami.png')"});
 
                        // animation de l'élément tireLaser
            $("#zoneGame .tireLaser").animate({top: '-35px', left: posiCanonLeft}, "slow", 'linear');
        }
});
Si vous avez une idée qui permettrai de faire un setInterval() récupérant la position TOP en temps réel et stoppant setInterval() lorsque le Laser arrive à une position verticale par exemple -35 TOP ?

Je vous remercie cela me permettrai d'avancer dans mon exercice.

Bien à vous,

Klaiko