jQuery Girl
  1. jQuery Girl
  3. Ouverture / fermeture en fondu par jQuery
Intereting Posts
$ .getScript renvoie le statut annulé et l’application n’exécute pas la fonction de rappel? Isotope: combinaison de filtrage + sélection multiple JQuery cliquez sur l’animation de redimensionnement. Maximiser la division par rapport aux autres Comment lire les données XML dans un navigateur IE à l’aide de la fonction Ajax de jQuery Comment appliquer jQuery quicksand (sortinger) sans perdre un survol de portefeuille basé sur jQuery? Théorie de la mise en page pour une galerie de vignettes keyup ne fonctionne pas sur Chrome sous Android Touche d’arrêt de répéter en attente. (jQuery) Comment passer des valeurs de champs de saisie de formulaire à un script utilisant AJAX / jQuery? Est-il possible de simuler une publication multipart / form-data avec un appel jquery ajax? problème de rappel jsonp Comment vérifier la taille de l’image (ex. 1 Mo) avant de télécharger Gérer les barres vides dans les graphiques à colonnes dans AmCharts jQuery 1.7.1 – La “valeur” de l’entrée de texte n’est pas mise à jour dans l’élément Firebug Inspect mais est affichée Ne cocher qu’une seule case (approuver / rejeter)

Ouverture / fermeture en fondu par jQuery

J’essaie d’append un simple effet de fondu enchaîné aux boutons avec jQuery mais je suis un peu coincé avec le fondu enchaîné. J’utilise ce code: 

$('#header #menu li a').hover(function () { $(this).fadeOut(0).addClass('hover').fadeIn(300); }, function () { $(this).fadeOut(0).removeClass('hover').fadeIn(0); });

Il ajoute une classe de survol qui définit un arrière-plan CSS et un fondu de l’image de survol. Cependant, lorsque je déplace un curseur hors du bouton, il disparaît simplement comme d’habitude, aucun fondu de fondu.

Pouvez-vous m’aider avec ceci s’il vous plaît?

Merci beaucoup pour toutes les réponses

Ces deux fonctions sont opposées l’une de l’autre, donc ça devrait marcher … ( code mis à jour ) 

 $('#header #menu li a').hover(function () { $(this).fadeOut(0).addClass('hover').fadeIn(300); }, function () { $(this).fadeOut(300) .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() }); });

C’est assez moche … Voir en action sur http://jsfiddle.net/zS6ex/ .

Cependant, vous avez toujours un problème: vous effacez l’ intégralité du lien , pas seulement l’image. Autant que je sache, vous ne pouvez pas définir l’opacité de l’image d’arrière-plan séparément (il est déjà difficile de définir une opacité complète si vous le faites manuellement …)

Comme il a été répondu maintes fois ici sur SO, vous devez utiliser les callbacks des fx methods jQuery pour effectuer quoi que ce soit après la fin d’ une animation. 

 $('#menu li a').hover(function(){ $(this).fadeOut('fast', function(){ $(this).addClass('hover').fadeIn(300); }); }, function(){ });

Quoi qu’il en soit, appeler .fadeOut(0) cet élément sans aucune animation, juste comme instantané. Le premier paramètre est la durée.

http://api.jquery.com/fadeOut/

Pourquoi ne pas simplement le cacher en ajoutant la classe car fadeOut (0) n’a pas d’animation 

 $('#header #menu li a').hover(function () { $(this).hide().addClass('hover').fadeIn(300); }, function () { $(this).hide().removeClass('hover').show(); // as there is no fading time the line above will be equal to $(this).removeClass('hover'); });

lorsque vous avez besoin de faire quelque chose après une animation, vous devez utiliser le rappel $(...).fadeIn(400,function(){ alert('this is the callback'); } , si vous n’utilisez pas le rappel, le code est couru pendant que l’animation se passe.

et je ne sais pas si c’est utile mais il y a une pseudo classe :hover en css, voir ici

La pseudo-classe: hover est prise en charge par tous les principaux navigateurs.

Donc, avec cela, vous pouvez faire différentes choses comme: 

 #header #menu li a:hover { ...set style of 'a' when over 'a' } #header #menu li:hover a { ...set style of 'a' when over 'li' }

il suffit de jouer avec un peu et vous pouvez faire beaucoup avec juste css