Animation avant que le lien ne s'execute

Version imprimable

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:

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

Bonsoir.

Code:

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

05/02/2010, 07h49
french-petzouille

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
05/02/2010, 09h42
danielhagnoul

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().
05/02/2010, 13h42
french-petzouille

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

je te remercie +++

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:

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

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:

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

05/02/2010, 14h23
pop_up

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

merci

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

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

05/02/2010, 14h41
pop_up

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
05/02/2010, 14h54
french-petzouille

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>
05/02/2010, 15h10
pop_up

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