Attendre la fin de la fonction

Version imprimable

Bonjour à tous, je prépare un petit tuto sur jquery et j'ai un petit problème de synchronisation de mes fonctions.

Alors j'ai des fonctions qui permettent de déplacer une image

des fonctions qui font apparaitre ou disparaitre une autre div

et une autre qui permet d'utiliser tout ça en fonction du lien sur laquelle la souris passe.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function moveimgup(){ $('.image').animate({top:'0px'},{queue:true,duration:500}); } function moveimgdw(){ $('.image').animate({top:'182px'},{queue:true,duration:500}); } function show(){ $('#texte').animate({opacity: 1},{queue:true,duration:1}); } function hide(){ $('#texte').animate({opacity: 0},{queue:true,duration:1000}); } $(function() { $('.button').hover(function(){ moveimgdw(); show();}, function(){ moveimgup(); hide();};
Je voudrais que lorsque l'on passe sur le bouton et que l'on en ressort rapidement, que l'animation over se déroule jusqu'au bout et qu'elle s'enchaine avec l'animation out

merci

Bonsoir.

Voici un exemple d'animation « aller et retour » au passage du pointeur.

Je préfère utiliser des id que des class (moins de surprises) et les événements spéciaux mousenter() et mouseleave(), car ils sont plus fiables que hover(). Pour l'image, il faut préciser tous les éléments de position dans le style avant de l'animer.

Code:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function moveup(){
            $("#imgTest").animate({"top":"-=50px"},500);
        }
 
        function movedown(){
            $("#imgTest").animate({"top":"+=50px"},500);
        }
 
        function show(){
            $("#texte").animate({opacity: 1},1000);
        }
 
        function hide(){
            $("#texte").animate({opacity: 0},1000);
        }
 
        $(document).ready(function(){
            $("#affiche").mouseenter(function(){
                movedown();
                hide();
            });
 
            $("#affiche").mouseleave(function(){
                moveup();
                show();
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche">
            <p>
                <img id="imgTest" src="../images/imageTest.png" style="position:relative; top:0px; left:0px; width:150px; height:150px;" />
            </p>
            <p id="texte">
                Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor. In eu elit quis urna eleifend ultrices. In sollicitudin. Phasellus laoreet. Sed aliquet diam vel nibh. In aliquet pharetra mi. Ut et sem. Phasellus ultrices libero sit amet ipsum.
            </p>
        </div>
    </div>
</body>
</html>

24/11/2009, 22h27
asagtoth

Merci beaucoup pour la réponse et particulièrement les actions pour la souris.
Je vais tester tout ça
24/11/2009, 22h56
asagtoth

J'ai testé sur IE7 qui comme d'habitude fait n'importe quoi.

SUr Firefox et Chrome pas de soucis, je vais faire un petit test sur IE8.

j'avais un résultat similaire avec une fonction semblable à celle que j'ai décrit plus haut.

Mais comme sur ton script la partie effectuée par mouseenter s'enchaine correctement tandis que pour le mouseleave les fonctions mouseup() et show() se font simultanément au lieu de l'une aprés l'autre.

Bonsoir.

Dans mon exemple les animations se déroulent en même temps.

Obtenir la bonne animation sur tous les navigateurs, surtout IE, n'est pas toujours évident.

On peut réintroduire le paramètre queue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function moveup(){
	$("#imgTest").animate({"top":"-=50px"},{queue:true, duration: 500});
}
 
function movedown(){
	$("#imgTest").animate({"top":"+=50px"},{queue:true, duration: 500});
}
 
function show(){
	$("#texte").animate({opacity: 1},{queue:true, duration: 1000});
}
 
function hide(){
	$("#texte").animate({opacity: 0},{queue:true, duration: 1000});
}

Mais pour être certain que les animations se déroulent l'une après l'autre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){
	$("#affiche").mouseenter(function(){
		$("#imgTest").animate({"top":"+=50px"}, 500, function(){
			$("#texte").animate({opacity: 0}, 1000);
		});
	});
 
	$("#affiche").mouseleave(function(){
		$("#imgTest").animate({"top":"-=50px"}, 500, function(){
			$("#texte").animate({opacity: 1}, 1000);
		});
	});
});

On peut même imposer un délai avant exécution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
//http://james.padolsey.com/javascript/jquery-delay-plugin/
$.fn.delay = function(time, callback){
	jQuery.fx.step.delay = function(){};
	return this.animate({delay:1}, time, callback);
}	
 
$(document).ready(function(){
	$("#affiche").mouseenter(function(){
		$("#imgTest").animate({"top":"+=50px"}, 500, function(){
			$("#texte").delay(500).animate({opacity: 0}, 1000);
		});
	});
 
	$("#affiche").mouseleave(function(){
		$("#imgTest").animate({"top":"-=50px"}, 500, function(){
			$("#texte").delay(500).animate({opacity: 1}, 1000);
		});
	});
});

26/11/2009, 21h18
asagtoth

Merci pour ces infos, je recherchais justement tout ça précisément.

En ces quelques lignes tu m'as appris beaucoup MErci