Lien hypertexte : une animation avant le transfert

**FiX''** · 09/07/2012, 20h56

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+

**kalimukti** · 12/07/2012, 20h13

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 :

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

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

Code :

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

.slideUp( [duration] [, callback] )

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

**FiX''** · 19/07/2012, 14h04

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 :

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

!

**Walcure** · 19/07/2012, 14h38

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

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

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

Lien hypertexte : une animation avant le transfert

jQuery

Vue hybride

Discussions similaires

Partager

Partager