J'ai une liste de plusieurs "déclencheurs" ( Maintenant, je veux améliorer la convivialité en ajoutant une minuterie / retard à la Div ouverte / visible de sorte qu'après3 ou 5 secondes après que l'utilisateur a déplacé sa souris à l'écart de la gâchette, la div ouverte / visible disparaît. < / p>
Le problème que je suis en ce moment, est-ce que chaque fois que j'ajoute une fonction avec .mouseleave (), les brisages divissibles ouverts / visibles dès que la souris quitte la zone de déclenchement.
Toutefois, si vous supprimez la fonction, la DIV reste visible et vous pouvez la fermer en cliquant sur le bouton Fermer.
Voici un violon / démo de ma situation. < / p>
Toute aide serait grandement appréciée.
Merci.
3 Réponses :
Vous avez besoin d'une durée dans la peau:
$('.trigger').bind("mouseenter" , function() {
var id = $(this).attr("data-code"); // Get the data from the hovered element
$('.copy .wrapper:visible').fadeOut();
$('#' + id).stop(true, true).show(); // Toggle the correct div
//Close button
$('.copy .wrapper span').click(function() {
$('.copy .wrapper').fadeOut();
});
});
Locrizak, merci. Cependant, bien que la div visible se cache sur Mouseleave, le bouton "proche" ne fonctionne pas. IE: jsfiddle.net/rzea/8gwjm/3 . J'ai vérifié la documentation de JQuery .Delay (), mais je ne suis pas si compétent avec JS.
La réponse de Locrizak est correcte (+1). Ceci est parce que Si vous voulez vous cacher sans animation, utilisez simplement http: / /jsfiddle.net/mattball/93f3k/ .delay () par défaut à la file d'attente des effets, mais .hide () sans paramètres ne cache aucun effet, sans aucun effet, la file d'effets n'est donc pas impliqué du tout. Settimeout < / code> :
dernier édition, je promets
Matt, merci. J'ai utilisé votre fonction de sécurité, mais cela n'a pas fonctionné, même si je n'étais pas sûr si j'aurais dû le mettre à l'intérieur du $ («. Trigger»). Survolez (fonction () ou à l'extérieur. TNX.
Je ne comprends pas votre confusion. Avez-vous regardé le jsfiddle?
Cela fonctionne presque 100%. Le problème est que si vous allongez au-dessus de l'élément suivant après avoir plané d'une autre d'abord, mais que le wrapper initial n'a pas encore disparu, puis les deux emballages disparaissent en même temps, et après cela, si vous survolez tout déclencheur, son L'emballage correspondant disparaît après une seconde a passé même si vous quittez votre souris sur la gâchette. Merci.
Autre chose. Versez-vous sur tous les déclencheurs et vous verrez ce que je veux dire.
Voir mon édition, que pensez-vous? Voulez-vous l'autre .Copy .Copy .wrapper Pour vous cacher immédiatement lorsque vous survolez sur un autre .trigger ? Comme ceci: jsfiddle.net/mattball/t6yup/1
Oui, c'est correct mat. Tout autre .wrapper visible doit se cacher immédiatement, ce qui se passe dans votre exemple. Cependant, il y a encore 2 problèmes: 1. Survolant les déclencheurs de haut en bas, les emballages disparaissent après une seconde après avoir quitté l'élément de déclenchement. Et 2. Le bouton de fermeture ne ferme pas le .wrapper . Tnx.
Permettez-moi d'ajouter que le problème n ° 1 se produit au hasard, vous devez simplement voler de haut en bas et à un moment donné, vous verrez le .wrapper disparaître presque immédiatement après avoir quitté le .trigger , quand il devrait être 3 secondes après. Tnx à nouveau.
BTW, n'appelle pas .Cliquez sur () à l'intérieur de .hover () car cela reculera le gestionnaire à chaque fois.
Hey Matt, ton exemple a fonctionné super! C'est exactement ce dont j'avais besoin. Merci beaucoup pour votre temps et vos conseils. Ouais, maintenant que je le regarde, je ne vois pas besoin d'appeler .click () à l'intérieur du .hover () . TNX à nouveau!
Hey Matt ... Est-ce moi ou pour une raison quelconque les wrappers ne se cachent pas du tout dans votre exemple? J'ai essayé de recharger la page aussi mais rien. o_o
Vous avez raison, c'est parce que je suis allumé de .hover (...) à .Live ('"survoler", ...) mais n'a pas écrit le rappel correctement. Je suis une si dune! Quoi qu'il en soit, c'est corrigé maintenant, voir la modification.
Absolument parfait! Tnx à nouveau mat :)
Hey Matt, tu vas te tuer ^ _ ^, mais je suis un petit problème: encore une fois, si vous survolez de manière réelle rapidement et plusieurs fois sur les déclencheurs, puis arrêtez-vous et placez simplement sur n'importe quel déclencheur, l'emballage apparaît mais il se cache alors même si votre souris est sur une gâchette. Amigo Matt, vous avez déjà investi beaucoup de temps à ce sujet, si vous ne voulez plus vous moquer de cela, pas de soucis, tout est cool, je comprends totalement. J'aimerais pouvoir avoir plus d'aide que de dépannage, mais comme vous pouvez le constater, je ne suis pas encore compicuteur à JQuery. Tnx à nouveau.
HM, je ne pense pas pouvoir reproduire le problème, mais je vais deviner. Cela fonctionne-t-il mieux pour vous? jsfiddle.net/mattball/b2ew5
Oui, en quelque sorte qui s'est débarrassé du problème. Merci beaucoup :)
Utilisez Démo de travail:
http://jsfiddle.net/j7qty/
de JQuery Delay Documentation:
la méthode .Delay () est la meilleure pour
retarder entre jQuery en file d'attente
effets. Parce que c'est limité - il
ne propose pas, par exemple, offrir un moyen de
annuler le retard-.delay () n'est pas un
Remplacement du natif de JavaScript
fonction de sécurité, qui peut être plus
approprié pour certains cas d'utilisation.
Settimeout au lieu de retard .
Marcosfromero, même problème que j'ai mentionné dans la poste de Matt. Merci.