jQuery Girl
  1. jQuery Girl
  3. Ajouter un délai avant .hide () avec jQuery
Intereting Posts
Comment détecter le flash et demander à installer? jQuery Tablesorter charge dynamicment le fichier CSV Script de chargement JQuery sur événement (cliquez) Je n’arrive pas à faire fonctionner jQuery Opérateurs de variables JavaScript jquery datepicker – active un autre datepicker sur select Comment créer une barre de titre avec du texte à gauche et du texte à droite? JQPlot – Graphique à secteurs – Obtenir la couleur de la tranche cliquée jQuery charge le rechargement de contenu dans div via le formulaire submit in div carrousel dynamic jQuery Masquer / afficher bascule divs séparés avec le même nom de classe Utiliser javascript pour faire défiler les iframe de haut en bas Dans JQuery, comment passer l’élément sur lequel vous avez cliqué à la méthode appelée à l’événement onclick Événements externes créés dynamicment, non déplaçables ERREUR: “Quelque chose” de Kendo n’est pas une fonction

Ajouter un délai avant .hide () avec jQuery

J’ai un code simple qui garde un élément visible pendant que la souris le survole et le cache une fois la souris éteinte: 

$(".item").hover( function () { $(this).show(); }, function () { $(this).hide(); } );

Je voudrais append un peu de retard avant qu’il se cache, mais en ajoutant $(this).delay(500).hide(); ne semble pas fonctionner … 

 var my_timer; $(".item").hover( function () { clearTimeout(my_timer); $(this).show(); }, function () { var $this = $(this); my_timer = setTimeout(function () { $this.hide(); }, 500); } );

Voici une démo: http://jsfiddle.net/e3cNK/1/

Si vous souhaitez pouvoir afficher à nouveau l’élément après qu’il ait été masqué, vous souhaitez modifier l’opacité de l’élément plutôt que de modifier son display . Cela gardera les éléments dans le stream normal de la page afin que lorsque l’utilisateur passe la souris sur l’élément caché, il peut à nouveau afficher: 

 var my_timer; $(".item").hover( function () { var $this = $(this); $this.text('Mouse-Over'); clearTimeout(my_timer); $this.stop().fadeTo(250, 1); }, function () { var $this = $(this); $this.text('Mouse-Out'); my_timer = setTimeout(function () { $this.fadeTo(250, 0); }, 500); } );

Voici une démo: http://jsfiddle.net/e3cNK/2/

.hide() sans aucun argument n’utilise pas la queue des effets (et n’aura pas à attendre .delay() ). Au lieu de cela, vous pouvez utiliser $(this).delay(500).hide(0);