Effet jQuery ne s'exécute qu'une seule fois

Frck -
Frck - 6 mars 2012 à 21:29

Bonjour,

J'ai réalisé un simple effet avec jQuery qui permet de faire apparaître/disparaître un bloc lorsque l'on clique sur une class précise.

Le problème, c'est que je ne peux le faire apparaître/disparaître qu'une seule fois et ensuite ça ne fonctionne plus. Comment rendre le code réutilisable à l'infini ? Merci

Afficher la suite

A voir également:

Effet jQuery ne s'exécute qu'une seule fois
Comment imprimer un tableau excel sur une seule page - Guide
Effet miroir word - Guide
Mettre une seule page en paysage word - Guide
Application se ferme toute seule android - Guide
Regrouper plusieurs feuilles excel en une seule - Guide

6 réponses

Réponse 1 / 6

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Allez chuis de bonne humeur:

<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			console.log('loaded');
			var dispo = true;
			var state = 1;
			$('.button').click(function(){
				//State 1 = affiché
				if(state == 1){
					//Pas en cours d'animation
					if(dispo){
						dispo = false;
						$('.target').fadeOut(1000, function(){
							dispo = true;
							state = 0;
						});
					}
				}else{
				//Bouton masqué
					if(dispo){
						dispo = false;
						$('.target').fadeIn(1000, function(){
							dispo = true;
							state = 1;
						});
					}
				}
			});
		});
	</script>
	<style type="text/css">
		.target{
			width:200px;
			height:200px;
			background-color:green;
		}
	</style>
	</head>
	<body>
		<button class="button">Bouton</button>
		<div class="target">
			Je suis la cible
		</div>
	</body>
</html>

Frck

Un code ENTIER ? Je n'en demandais pas tant, merci de l'effort !

J'y jette un coup d'oeil dans la journée !

Réponse 2 / 6

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Hello,

pour 5€ sur paypal j'te répondrai (Rahh chuis méchant ce soir.)

Frck

Bonne chance dans ta ruée vers l'or...

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Merciiiiiiiii

Réponse 3 / 6

Frck

OK. Ça fonctionne. Je vais m'en inspirer.

Cependant, je me pose la question : quelle est l'utilité que la condition if(dispo) que l'on retrouve à 2 reprises ?

A première vue (contredis-moi si j'ai tord), le code fonctionne très bien sans elle, et elle n'apporte rien au code... A première vue...

Peux-tu m'éclairer ?

Réponse 4 / 6

Frck

J'ai refait mon code, toujours un affichage UNIQUE. Après un affichage/désaffichage, fini.

J'utilise animate() pour l'affichage. Il y a certainement un lien avec ce problème car quand j'utilise fadeIn(), ça fonctionne.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

La variable dispo ne permet pas de relancer l'animation tant que l'effet n'est pas terminé.

Ca évite que si tu clique 30 fois de suite sur le bouton, ca lance 30 fois l'animation (qui dure 1 seconde à chaque fois) et donc que durant 30 secondes, tu aies une sucession de fadein/fadeout.

Est-ce que je peux voir ton code complet ?

Edit: Pour faire un truc plus joli tu peux désactiver le bouton tant que l'effet n'est pas terminé, mais dans le principe ca revient au même

Réponse 6 / 6

Frck

Resolved! Je m'explique.

Lors du clique sur un bouton, un bloc en position: absolute, width+height: 100% remplissait toute la fenêtre.
Pour faire faire apparaitre ce bloc, j'utilisais animate() nécessaire pour ajouter de l'opacité ; accompagné de cette library jQuery : http://gsgd.co.uk/sandbox/jquery/easing/
Pour la faire disparaitre, j'utilisais juste fadeOut().

Le problème était que fadeOut ajoutait en CSS : display:none. Du coup, après une première apparition (après le fadeOut), l'effet avait bien encore lieu mais on ne le voyait pas étant donné que le animate() n'ajoutait pas de lui même un display:none comme l'aurait fait un fadeIn().

En fait, l'effet fonctionnait bien en boucle, mais en silence. Merci à l'Inspecteur d'éléments de Chrome !

Pour résoudre ce problème j'ai tout simplement rajouté un $("element").css("display":"block").animate(...);

----

Pour minimiser le code, j'ai rajouté l'opacité du background dans le CSS avec la propriété rgba. Le animate() n'était plus nécessaire, j'ai retapé tout cela.

Du coup le code se résume à ça :

$(document).ready(function(){  

 $("#panneau").hide();  
   
   
 $(".show").click(function(){  
  $("#panneau").slideDown(700, 'easeOutExpo');  
  $(".wrap").fadeIn();  
 });  
   
 $("#panneau").click(function(){  
  $(".wrap").fadeOut("fast");  
  $("#panneau").fadeOut("slow");  
 });  
   
});

Mais maintenant que j'ai compris l'importance de ton if(dispo), je vais devoir rebouger à tout ça... Here we go again!

(Pardon pour le roman.)

Discussions similaires

Devinette

Changer l'orientation d'une seule diapo

paiment 4x nickel sur top achat

Paiement en 4 fois cdiscount

Mon téléviseur s'allume seul

Votre réponse

Discussions similaires