Animation avant que le lien ne s'execute

**french-petzouille** · 04/02/2010, 08h46

Bonjour
Soit une page html "toute bête" avec une image et un lien .
Un click sur l'image ouvre une autre page = comportement normal

Ce que je souhaite ... faire un double click sur l'image ... et avoir une animation via jQuery , qui simule un " chargement" avant que le lien ne fasse son action ( autrement dit ... je double clique ... je fais patienter le visiteur 2 secondes avec une petite animation et ensuite l'url est atteinte )

la page html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>w_launch</title>
<style type="text/css">
.loading{display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('a').dblclick(function () 
    {
            // en tout premier désactiver le lien
            // mon animation
            $("#loading").fadeIn(500).delay(1000).fadeOut(250);
            $("#Table_01").delay(1750).fadeOut(250);
            // rétablir le lien pour charger la page cible
    });
 
});
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="loading" class="loading"><h2>Chargement en cours</h2></div>
<a href="http://mon_site.net/site/simul_aiguillage.php?cnx=1">
<div  id="Table_01">
<img id="w_launch" src="images_launch/w_launch.gif" alt="" />
</a>
</div>
</body>
</html>

MA QUESTION REVIENT DONC A :
Comment désactiver le lien a ... puis faire les animations jQuery ... et "réactiver" le lien ?
Merci ++

**danielhagnoul** · 04/02/2010, 22h53

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
// éviter d'utiliser dblclick, car il n'est pas géré de la même manière par tous les navigateurs
$("a.doubleclic").click(function(event){
	event.preventDefault();
 
	$("#loading").fadeIn(500).delay(1000).fadeOut(250);
	$("#Table_01").delay(1750).fadeOut(250, function(){
		window.location.href = $(this).attr("href");
	});
});

**french-petzouille** · 05/02/2010, 07h49

merci danielhagnoul

ton script ne fait pas ce qui est souhaité
on a bien le passge sur la page appelée ais pas d'animation préalable

le lien ne laisse pas le temps aux animations
as tu une modif à me proposer
cordialement

**danielhagnoul** · 05/02/2010, 09h42

Bonjour.

Bien entendu, avant de vous envoyer la solution je l'ai testée et elle fonctionne parfaitement.

Le simple click sur l'élément a de classe doubleclic est bien stoppé par e.preventDefault (). L'animation se déroule entièrement. Le nouveau lien ne peut avoir lieu qu'après la fin de l'animation, car il est placé dans la fonction de rappel du dernier fadeOut().

**french-petzouille** · 05/02/2010, 13h42

tu as raison
je me suis fais avoir avec le cache du navigateur.

je te remercie +++

**pop_up** · 05/02/2010, 13h54

Bonjour à vous,

Je comprend pas trop, je suis pas arrivé à faire fonctionner ce code. Pourtant j'ai juste fait des copier/coller, mis la classe "doubleclic" au lien :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>w_launch</title>
    <style type="text/css">
    .loading{display:none;}
    </style>
    <script type="text/javascript" src="./jquery1.4.js"></script> 
    <script type="text/javascript" src="./jquery.delay.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
        // éviter d'utiliser dblclick, car il n'est pas géré de la même manière par tous les navigateurs
        $("a.doubleclic").click(function(event){
            event.preventDefault();
 
            $("#loading").fadeIn(500).delay(1000).fadeOut(250);
            $("#Table_01").delay(1750).fadeOut(250, function(){
                window.location.href = $(this).attr("href");
            });
        });
 
 
    });
    </script>
</head>
<body bgcolor="#FFFFFF">
    <div id="loading" class="loading"><h2>Chargement en cours</h2></div>
    <a class="doubleclic" href="pagelien.htm">
    lien
    </a>
</body>
</html>

Ou est ce que j'ai fait faux ?
De plus je comprend pas trop le " $("#Table_01")". On a pas d'élément dont l'id est "Table_01", ça sert à quoi ici ?

merci

**french-petzouille** · 05/02/2010, 14h18

popup tu as bien raison
en simplifiant a fond le code pour mon exemple ... j'ai viré la div dont tu ne retrouve pas la trace.

j'edite le code initial et la rajoute
bien vu

je code fonctionne chez en le modifiant un petit peu. le lien n'est pas trouvé donc j'ai rajouté var link = ...
de plus j'ai viré la class "doubleclic" et suis revenu a un lien classique entourant une image

<a id="w_launch" href="http://mon_site/site/simul_aiguillage.php?cnx=1">
<img id="w_launch" src="http://mon_site/site/simul_mdk/images_launch/w_launch.gif"alt="" />
</a>

Code :

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

1
2
3
4
5
6
7
8
    $("#w_launch").click(function(event){
        event.preventDefault();
        var link=$(this).attr("href");
        $("#loading").fadeIn(500).delay(1000).fadeOut(250);
        $("#Table_01").delay(1750).fadeOut(250, function(){
             window.location.href =link;
        });
    });

avec cela c'est OK

**pop_up** · 05/02/2010, 14h23

Pourras tu mettre ton code fonctionnel ensuite pour voir la différence avec le miens qui ne fonctionne pas svp ?

merci

**french-petzouille** · 05/02/2010, 14h31

Voila le code complet de ma page de simulation de chargement:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>w_launch</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
<style type="text/css">
body {
    margin:0; 
    padding:0; 
    font-family: "Trebuchet MS",Arial,Verdana, Helvetica, sans-serif;
    font-size:11px;
    font-weight: bold;
    background:url(../css/fond_news.png);
    background-attachment:fixed;
}
 
#containeur_global{ position:relative; width:900px; margin:auto;}
img {border:0 none; vertical-align:middle;}
.loading{display:none; position:absolute;left:50%; top:300px; color:#FFF;}
 
</style>
<script type="text/javascript">
$(document).ready(function()
{
    $("#w_launch").click(function(event){
        event.preventDefault();
        var link=$(this).attr("href");
        $("#loading").fadeIn(500).delay(1000).fadeOut(250);
        $("#Table_01").delay(1750).fadeOut(250, function(){
             window.location.href =link;
        });
    });
});
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="containeur_global">
<div id="loading" class="loading"><h2>Chargement en cours</h2></div>
<!-- ImageReady Slices (w_launch.psd) -->
<table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img id="w_launch_01" src="http://mon_site/site/simul_mdk/images_launch/w_launch_01.gif" width="900" height="109" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img id="w_launch_02" src="http://mon_site/site/simul_mdk/images_launch/w_launch_02.gif" width="242" height="404" alt="" /></td>
		<td>
			<a id="w_launch" href="http://mon_site/site/simul_aiguillage.php?cnx=1">
				<img  id="w_launch" src="http://mon_site/site/simul_mdk/images_launch/w_launch.gif" width="443" height="197" border="0" alt="" />
                        </a>
				</td>
		<td rowspan="2">
			<img id="w_launch_04" src="http://mon_site/site/simul_mdk/images_launch/w_launch_04.gif" width="215" height="404" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img id="w_launch_05" src="http://mon_site/site/simul_mdk/images_launch/w_launch_05.gif" width="443" height="207" alt="" /></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<p style="text-align:center;"><a href="../simul_aiguillage.php?cnx=0">Retour au site MédiClick! Studio</a></p>
</div> <!--  END containeur _global -->
</body>
</html>

**pop_up** · 05/02/2010, 14h41

ok merci,

Je viens de voir pour quoi mon exemple ne fonctionnait pas.

J'ai téléchargé jquery ici : http://code.jquery.com/jquery-1.4.1.min.js
Ainsi, je charge ce fichier mais ça ne fonctionne pas

En revanche, toi, tu utilise ce lien : http://ajax.googleapis.com/ajax/libs.../jquery.min.js

Et la, comme par miracle, ça fonctionne.

C'est quoi la différence exactement ?

merci

**french-petzouille** · 05/02/2010, 14h54

aucune idée

sauf que je met le lien vers la lib jQUERY
mettait tu le bon chemin chez toi ??

<script type="text/javascript" src="./jquery1.4.js"></script>
<script type="text/javascript" src="./jquery.delay.js"></script>

**pop_up** · 05/02/2010, 15h10

Ok c'est résolu.

Mon lien vers jquery est bien ok mais le fait d'appeler jquery.delay.js fait planter le truc.

merci

Animation avant que le lien ne s'execute

jQuery

Discussions similaires

Partager

Partager