jQuery .addClass et .fadeIn?
Donc, j'ai de ces éléments h1 qui sont des liens et je veux ajouter une classe à eux et à la décoloration, qui classe une fois que l'élément a été survolé, et puis onMouseOut ont la classe supprimée, tandis que la décoloration de la classe. Mais à l'aide de la fonction fade ne fait rien pour moi. Voyant qu'il cache l'élément. Des idées?
jQuery(".categories h1 a").hover(
function () {
jQuery(this).fadeIn("slow").addClass("active");
},
function(){
jQuery(this).fadeOut("slow").removeClass("active");
});
});
Merci!
EDIT:::
jQuery("h1").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
});
});
La clarté s'il vous plaît, que voulez-vous à s'estomper? Voulez-vous le lien à s'estomper dans l'un vous passez la souris sur le s1? Votre code sera fade, si elle a travaillé, ne serait que le serveur à s'estomper le lien, mais alors vous ne serez pas en mesure d'en fondu de nouveau.
Pas de. Je veux fondu dans la classe ajoutée de la h1>un tag. et puis fade out sur souris
Voir >>jsfiddle.net/NLChW/4 << animer à l'aide de
squaredcube.com/beta Pas de travail.
Vous devez inclure la bibliothèque jQuery UI dans votre page. Essayez d'inclure
Pas de. Je veux fondu dans la classe ajoutée de la h1>un tag. et puis fade out sur souris
Voir >>jsfiddle.net/NLChW/4 << animer à l'aide de
squaredcube.com/beta Pas de travail.
Vous devez inclure la bibliothèque jQuery UI dans votre page. Essayez d'inclure
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
dans votre page et cela devrait fonctionner.OriginalL'auteur Aaron Brewer | 2012-05-03
Vous devez vous connecter pour publier un commentaire.
Essayez d'utiliser jQuery UI .addClass et .removeClass.
DÉMO (Pour une raison quelconque, il n'a pas d'animer correctement(fade) pour la première fois.. mais alors, il fonctionne très bien)
Edit: mis à Jour pour l'exhaustivité.
Vous pouvez également utiliser
.animate
pour obtenir l'effet désiré. Voir ci-dessous,DÉMO
Raison pour .l'arrêt est d'arrêter de fondu de transition ou d'autre planant au-dessus de plusieurs liens rapidement va montrer plusieurs animations en même temps. Eh bien, vous serait en mesure de le voir quand vous avez de plus longue durée (1000ms)
Intéressant, Merci pour l'explication! Je ne devrais pas faire des hypothèses sur les utilisateurs de la vitesse de la souris haha.
Merci Vega!
OriginalL'auteur Selvakumar Arumugam
Si vous ne voulez pas utiliser jquery UI, car il sera une charge supplémentaire, vous pouvez effectuer les opérations suivantes :
(a été utile pour moi quand le "caché" classe de bootstrap est utilisé dans mon application)
Se fanent lentement, tout en supprimant la classe :
Fondu lentement, ajouter la classe et puis fondu de retour dans:
espère que cela va simplifier quelqu'un la tâche!
OriginalL'auteur Nishanth Shaan
Sonne comme vous voulez les styles de la classe à s'estomper. Vous devriez regarder dans animate() pour qui: http://api.jquery.com/animate/
fadeIn simplement se fane dans l'élément.
Voir >>jsfiddle.net/NLChW/4 << animer à l'aide de
Heya Vega, ce n'est pas de travail. squaredcube.com/beta
OriginalL'auteur Steve Davis
Je ne pense pas que vous pouvez fondu enchaîné entre les classes, mais vous pouvez utiliser le
animate
fonction.animate
vous permet de modifier le css variable pendant un temps déterminé.http://api.jquery.com/animate/
Je sais qui supprime une partie de style à partir du fichier css, mais encore une fois, je ne pense pas que jQuery sera fondu enchaîné entre les classes.
OriginalL'auteur jray
Si vous avez de la bibliothèque jQuery UI chargé, vous pouvez définir un supplément de param pour la toggleClass fonction.
Jeu d'opacité de la via css.
puis
Le 1000 est la valeur du compteur de millisecondes sur l'événement. Ainsi, l'effet devrait s'estomper à 1,0 opacité lors de son survol en une seconde et fade out en 1 seconde lorsqu'il n'est pas plané.
OriginalL'auteur Christopher Marshall
Essayer ça, et voici le jsFiddle (entrez description du lien ici) :
OriginalL'auteur