Lien hypertexte : une animation avant le transfert

Version imprimable

09/07/2012, 20h56
FiX''

Lien hypertexte : une animation avant le transfert

Bonsoir tout le monde,

Je me permets de poster un message, car après plus de 5 heures de recherches, je n'ai pas trouvé de solution à mon problème.

Je vous explique.

J'ai un code jquery qui fonctionne (presque) parfaitement.

J'ai un div avec des liens à l'intérieur, affichés via des li. Ce div est positionné de telle façon que l'on ne puisse voir qu'une partie de ce div pour afficher un texte du type "Cliquer ici pour plus de liens". Lorsqu'on clic sur ce texte, le div augmente en largeur, monte et affiche les liens. Si on clic à nouveau sur ce même texte l'animation est jouée dans l'autre sens.

Cependant, si on clic sur un lien que compose ce div (Lien 1, Lien 2, etc...), l'animation ne se joue pas et le navigateur transfert automatiquement vers la dite page.

Voici un lien pour mieux comprendre : http://jsfiddle.net/SLQHy/3/

Je voudrai faire en sorte de bloquer le lien (le désactiver ?), jouer les animations, puis réactiver le lien et transférer le visiteur.

J'ai essayé de cherché sur le net... mais personne ne semble avoir besoin de ce type de script.

Une idée ?

Si vous avez besoin de plus d'infos, n'hésitez pas !

Merci d'avance pour votre aide.

A+
12/07/2012, 20h13
kalimukti

Salut,
Ce que je ferais dans les grandes lignes:
Pour éviter que le navigateur ne lance le lien, tu as besoin d'un return false dans le gestionnaire du click.
Dans ce gestionnaire en question, tu lances une animation. Le dernier paramètre de ton animation sera une fonction à lancer quand l'animation est complète (le "callback").
exemples:

Code:

.animate( properties [, duration] [, easing] [, complete] )

Code:

.slideUp( [duration] [, callback] )

Dans cette fonction, tu rediriges le navigateur vers le lien.
Ca devrait marcher comme ça...

Merci pour cette réponse.

J'ai continué à chercher de mon côté et j'ai réussi a faire quelque chose de pas trop mal. Voici le code :

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
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tests effet de fondu sur lien</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
	/* Effet de fondu en arrivant sur la page */
	$('#wait').animate({opacity: '1'}).fadeOut(500);
 
	/* Clic sur un des liens de la balise p, on lance une fonction */
	$('p a').click(function(event){
 
	/* Bloquage de l'effet par défaut des liens (= redirection) */
		event.preventDefault();
 
	/* Récupération de la valeur href du lien et mise en variable (vHref) */
		vHref = $(this).attr('href');
 
	/* Effet de fondu en quittant la page + redirection */
		$('#wait').css({opacity: '1'}).fadeIn(500);
			setTimeout('document.location.href = "'+ vHref +'"', 750);
		});
});
</script>
 
<style type="text/css">
#wait {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:#FF0000;
}
</style>
 
</head>
 
<body>
 
 
<div id="wait"></div>
 
<p> <a href="http://www.google.fr">lien</a> </p>
<p> <a href="http://www.google.fr">lien</a> </p>
<p> <a href="http://www.google.fr">lien</a> </p>
<p> <a href="http://www.google.fr">lien</a> </p>
<p> <a href="http://www.google.fr">lien</a> </p> 
 
 
</body>
 
</html>

Cependant, j'ai encore un petit soucis, lorsqu'on revient en arrière via le bouton back on tombe sur le voile rouge.

Comment faire pour corriger ce soucis, car il ne semble pas possible de gérer en jquery les événements window.history.back(); !

Comment faire ?

Merci pour votre aide :) !

Je n'ai pas bien compris ce que tu cherchais a faire mais pour retiré à nouveau le 'film' rouge que tu as :

rajoute ce qu'il y a en gras :
Code:

1 2 3 4 5 /* Effet de fondu en quittant la page + redirection */ $('#wait').css({opacity: '1'}).fadeIn(500); setTimeout('document.location.href = "'+ vHref +'"', 750); $('#wait').animate({opacity: '1'}).fadeOut(500);