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 <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

9

Essayez d'utiliser jQuery UI .addClass et .removeClass.
```
$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});
```
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,
```
$(function() {
    $(".categories h1 a").hover(function() {
        $(this).stop().animate({
            backgroundColor: "#a7bf51"
        }, 800);
    }, function() {
        $(this).stop().animate({
            backgroundColor: "#FFFFFF"
        }, 800);
    });

});
```
DÉMO

C'est une façon intéressante de le faire. Découvrez ma réponse ci-dessous, je pense que c'est plus propre. Est-il une raison pour laquelle vous êtes à l'aide de cesser de fonctionnalité et de addClass au lieu de basculer?
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
4

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 :
```
$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)
```
Fondu lentement, ajouter la classe et puis fondu de retour dans:
```
$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)
```
espère que cela va simplifier quelqu'un la tâche!

OriginalL'auteur Nishanth Shaan
2

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.

Bon, j'ai essayé d'utiliser cette fonction Animate et ne semblent pas à même de le faire fonctionner maintenant... Voir la mise à jour de question.
Voir >>jsfiddle.net/NLChW/4 << animer à l'aide de
Heya Vega, ce n'est pas de travail. squaredcube.com/beta

OriginalL'auteur Steve Davis
1

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.

Bon, j'ai essayé d'utiliser cette fonction Animate et ne semblent pas à même de le faire fonctionner maintenant... Voir la mise à jour de question.

OriginalL'auteur jray
1

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.
```
h1 a {
  opacity:0.8;
}

h1 a.hovered {
  opacity: 1.0;
}
```
puis
```
jQuery(".categories h1 a").hover(function(e) {
    $(this).toggleClass('hover', 1000);
}
```
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é.

C'est pourquoi j'ai dit "Si vous avez de la bibliothèque jQuery UI chargé". ;}

OriginalL'auteur Christopher Marshall

Essayer ça, et voici le jsFiddle (entrez description du lien ici) :

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.