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
- Powerpoint changer orientation d'une seule diapositive - Forum Powerpoint
- Une archive ne peut être lue que par une seule personne. ✓ - Forum Linux / Unix
6 réponses
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
5 mars 2012 à 23:52
5 mars 2012 à 23:52
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>
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
5 mars 2012 à 20:21
5 mars 2012 à 20:21
Hello,
pour 5€ sur paypal j'te répondrai (Rahh chuis méchant ce soir.)
pour 5€ sur paypal j'te répondrai (Rahh chuis méchant ce soir.)
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
5 mars 2012 à 23:41
5 mars 2012 à 23:41
Merciiiiiiiii
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 ?
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 ?
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.
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
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
Modifié par prosthetiks le 6/03/2012 à 20:51
Modifié par prosthetiks le 6/03/2012 à 20:51
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
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
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 :
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.)
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.)
6 mars 2012 à 14:16
J'y jette un coup d'oeil dans la journée !