Attendre la fin de la fonction

**asagtoth** · 24/11/2009, 00h27

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 :

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

**danielhagnoul** · 24/11/2009, 02h22

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 :

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

**asagtoth** · 24/11/2009, 22h27

Merci beaucoup pour la réponse et particulièrement les actions pour la souris.
Je vais tester tout ça

**asagtoth** · 24/11/2009, 22h56

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.

**danielhagnoul** · 25/11/2009, 02h12

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 :

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
 
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 :

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

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 :

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

**asagtoth** · 26/11/2009, 21h18

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

En ces quelques lignes tu m'as appris beaucoup MErci

Attendre la fin de la fonction

jQuery

Discussions similaires

Partager

Partager