Discussion :

[Amnesiak]

Bonsoir,

J'ai réussi à isoler dans l'exemple ci-dessous un phénomène que je n'arrive pas à expliquer. Il s'agit d'une animation d'un élément pour laquelle la fonction callback semble se lancer 2x. Pour bien comprendre ce que je cherche à réaliser, j'ai réduit le problème en un exemple simpliste de chat/souris :

Au chargement de la page, 1 petit div (qui représente une souris) se déplace aléatoirement de gauche à droite grâce à une animation infinie. Idéalement il doit y avoir plusieurs souris, mais pour simplifier je n'en affiche qu'une.
Lors du clic sur un bouton, 1 autre div (le chat) commence à se déplacer. Une fois l'animation du chat terminée, je décide d'immobiliser les souris.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
$(document).ready(function(){
 
    // animation infinie d'une souris
    function animateMouse(id)
    {
        var x = Math.floor(Math.random()*200);
        $("#"+id).animate({"margin-left":x},400,"linear",function(){
            animateMouse(id);
        });
    }
 
    // démarre l'animation de la souris
    animateMouse("mouse1");
 
    $("#button").click(function(){
 
        console.log("click!");
 
        // démarre l'animation du chat
        $("#cat").animate({"margin-left":200},200,"linear",function(){
 
            console.log("cat stopped");
 
            // immobilise toutes les souris
            $(".mouse").each(function(i,e){
                console.log("stopping mouse "+$(e).attr("id"));
                $(e).stop();
            });
        });
    });
});
</script>
 
<input type="button" id="button" value="START" />
<div id="cat"></div>
<div id="mouse1" class="mouse"></div>
<div id="mouse2" class="mouse"></div>

Malgré que ce soit simple, il semble que le callback de l'animation du chat soit exécuté 2x, comme le montre le résultat suivant. Par contre j'ai l'impression que ce n'est pas systématique... on dirait que parfois ça se déroule correctement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
click!
cat stopped
stopping mouse mouse1
cat stopped
stopping mouse mouse1

Comble de l'étrangeté, si je commente la ligne $(e).stop(), l'animation se déroule toujours correctement. J'avoue ne pas y comprendre grand chose.

Quelqu'un aurait une explication ? Peut-être que je m'y prend mal pour la boucle infinie ? Merci pour vos idées, toute piste est bonne à prendre.

PS : J'ai testé sous Firefox 7.0.1 avec jQuery1.6.4, 1.6.3 et 1.6.2

[Amnesiak]

Bonjour, je ne sais pas si ma description du problème est assez compréhensible. Pour ceux qui souhaiteraient tester par l'exemple, je l'ai mis à disposition ici : http://www.geoffray.be/public/demo/anim_jquery.html

Merci d'avance

[MrPringle]

Sous Chrome chez moi le log n'a lieu qu'une seule fois. Tu utilises quel navigateur ?

[SpaceFrog]

Je ne vois rien d'anormal sous ffx ...

[Amnesiak]

Le cas ne se produit pas à chaque fois... il faut recharger la page puis cliquer sur le bouton. Parfois le log affiche 2x "cat stopped" alors que ça ne devrait apparaître qu'une seule fois.

Parfois le callback est appelé 2x :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
click!
cat stopped
stopping mouse mouse1
cat stopped
stopping mouse mouse1

Et parfois une seule fois, ce qui est normal:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
click!
cat stopped
stopping mouse mouse1

Après quelques essais, j'ai pu reproduire le problème sous Firefox 7.0.1 (XP et Seven), Chrome 14.0.835 (XP), Safari 5.0.5 (XP), ainsi qu'Opera 11.11 (XP)

[danielhagnoul]

Bonsoir

Je suggère de tester : $(e).stop(true, true);