jquery addclass/removeclass ne fonctionne pas toujours lors de la “vitesse” est réglé (les événements de la souris)

En classe css "employee_mouseover" je fais le bg de couleur rouge.

        $(".employee").bind("mouseenter", function() {
            $(this).addClass("employee_mouseover");
        });
        $(".employee").bind("mouseleave", function() {
            $(this).removeClass("employee_mouseover");
        });

Cela fonctionne bien.

Mais, lorsque j'ai mis une vitesse pour le rendre plus joli, l'élément reste rouge quand je me suis vite faire un mouseenter+mouseleave;

    $(".employee").bind("mouseenter", function() {
        $(this).addClass("employee_mouseover", "fast");
    });
    $(".employee").bind("mouseleave", function() {
        $(this).removeClass("employee_mouseover", "fast");
    });

Cela ne fonctionne pas bien, à moins de me déplacer dans et hors de l'élément, très lentement.

Est-il une meilleure façon de le faire?

Merci d'avance.

Je ne savais même pas que removeClass et addClass accepté un 2ème paramètre avec une vitesse.
ils n'en ont pas.
comment pouvez-vous supprimer une classe, plus lentement?
peut-être que jquery a été assez intelligent pour exécuter le css modifications effet lentement?
le duration paramater est jQuery UI spécifiques, les tags sur cette question ont été mis à jour en conséquence.

InformationsquelleAutor Thomas Stock | 2009-03-03

jquery jquery-ui

3

Il peut être fait, mais vous devez installer le jquery plugin coloranimate. Ensuite, vous pouvez utiliser le code ci-dessous pour changer la couleur lentement:
```
$(".employee").bind("mouseenter", function() {
  $(this).animate({backgroundColor: "#bbccff"}, "slow");

});
$(".employee").bind("mouseleave", function() {
  $(this).animate({backgroundColor: "white"}, "slow");
});
```
- Merci pour cette réponse constructive. Les autres réponses ont été utile aussi bien dans l'enseignement moyen, mais celui-ci m'a donné une façon de réaliser ce que j'essayais de faire. Merci!
InformationsquelleAutor Marius
6

de la jQuery UI docs:

Le jQuery UI effets de base s'étend la classe de base de l'API pour être capable d'animer entre deux classes différentes. Les méthodes suivantes sont modifiées. Ils acceptent maintenant les trois autres paramètres: la vitesse, l'assouplissement (en option), et le rappel.

Donc @Thomas doit inclure à la fois jQuery et jQuery UI bibliothèques sur sa page, l'activation de la vitesse et les paramètres de rappel à addClass et removeClass.
- c'est vraiment sympa l'info, merci
InformationsquelleAutor David Carlson
3

Vous utilisez le mauvais événement. Vous souhaitez:
```
$(".employee").hover(function() {
 $(this).addClass("employee_mouseover");
}, function() {
 $(this).removeClass("employee_mouseover");
});
```
Et il n'y a pas de vitesse argument sur ajouter ou supprimer de la classe.

InformationsquelleAutor cletus
2

Oui, le faire en CSS!
```
.employee:hover{background:pink;}
```
Aussi, il n'y a pas de vitesse parameted pour addClass, la vitesse n'existe que pour les effets.
- Cela ne veut pas me permettre de régler la vitesse pour le faire paraître jolie, non? D'ailleurs, j'ai besoin d'activer/de désactiver les événements de souris parfois, lorsque l'utilisateur fait des trucs..
- "Aussi, il n'y a pas de vitesse parameted pour addClass, la vitesse n'existe que pour les effets." Qui ne semble pas être vrai, car il fonctionne quand je le fais lentement. J'ai décrit à la fois de ces choses dans mon post original.
- en fait, c'est très vrai.
- Il fonctionne, mais c'est apparemment une fonctionnalité non documentée qui ne fonctionne pas correctement.
- Il ne peut pas travailler du tout. Une classe est une chose qu'un élément a ou n'a pas; il n'y a pas d'entre-deux comme une interpolation de la position ou de mélanges de couleurs possible. Tout ce que vous voyez, ce n'est pas une lente classe de transition.
- Non, il n'y a pas une telle caractéristique. jQuery tronc confirme addClass/removeClass sont des opérations synchrones: dev.jquery.com/browser/trunk/jquery/src/core.js
- Merci pour les recherches sur ce sujet. Ce qui est bizarre tho est intellisense de visual studio 2008 m'a dit que le deuxième paramètre à passer à addClass() est la "vitesse". Je me demande pourquoi ils ont mis que dans (ET de le faire fonctionner) sans indiquer ce sur le site jquery
- Microsoft frappe à nouveau. Éteignez le très-mal-nommé "intellisense" et toujours par le réel de la documentation.
- En fait, je pense que l'intellisense fichier que j'utilise est de la troisième partie. À côté de cela, c'est la première fois en 3 ans d'utilisation intensive de intellsense que j'ai trouvé une erreur en elle..
InformationsquelleAutor svinto
2

Il y a un paramètre de durée pour removeClass (http://docs.jquery.com/UI/Effects/removeClass), mais il ne travaille pas dans FF. Il n'y a rien de mal avec mon code? Je suis nouveau sur JQuery. Je vais essayer d'animer la fonction maintenant.

Ce que j'essaie de faire ici est d'utiliser les chevilles puis sélectionner la destination d'ancrage emplacement lorsque l'ancre est cliqué.
Voici mon code HTML -
```
<ul>
                <li><a href="#caricatures">Caricatures</a></li>
                <li><a href="#sketches">Sketches</a></li>
</ul>
```
Ma destination d'ancrage est -
```
<a href="#" id="caricatures"><h3>Caricatures</h3></a>
```
C'est là que je pourrais la couleur d'arrière-plan de changement.

Voici mon CSS -
```
<style>
            .spotlight{
                background-color:#fe5;
            }
</style>
```
Voici mon code JQuery -
```
<script>
    $('a[href$="caricatures"]').click(function(){
        $('a[id="caricatures"] h3').addClass("spotlight");
        $('a[id="caricatures"] h3').removeClass("spotlight",1000);
    });
    </script>
```
- J'ai lu le animate() documentation de la méthode (api.jquery.com/animate) et il dit: "la largeur, la hauteur ou la gauche peut être animé, mais la couleur d'arrière-plan ne peut pas être.". C'est pourquoi mon .animate() ne fonctionnait pas. switchClass ne fonctionne pas non plus. Et je ne veux pas toggleClass.
- Une correction à mon commentaire ci-dessus - j'ai essayé d'animer backgroundColor dans un autre exemple, et il avait travaillé. Il vient de m'a frappé et c'est donc ce nouveau commentaire. Alors maintenant, je suis confus pourquoi la documentation dit que la couleur d'arrière-plan ne marchera pas. Faire ce qu'ils veulent dire "couleur de fond" ne fonctionne pas, mais "backgroundColor" le fait?
- J'ai enfin pu faire mon code du travail. Merci à tous pour vos réponses. J'ai ajouté une ligne supplémentaire à mon code, j'ai inclus "jquery-ui-1.8.6.custom.min.js" fichier de script et mon code ci-dessus fonctionne parfaitement bien. Il n'y a aucune mention sur le fait d'inclure ce script dans la documentation et des exemples pour addClass (api.jquery.com/addClass). Je ne savais pas que c'était une partie de JQuery UI.
InformationsquelleAutor designplusdev
1

addClass est pour ajouter des classes CSS pour les éléments. Si vous êtes à la recherche pour modifier certaines propriétés CSS par interpolation, alors vous avez besoin de le faire explicitement à l'aide de Effets.

Votre code:
```
$(this).addClass("employee_mouseover", "fast");
```
Va ajouter deux classes, employee_mouseover et fast à this, qui n'est évidemment pas ce que vous êtes après.
- Pense que vous avez collé le mauvais code. Aussi, "rapide" est ignoré.
- Wow vous avez entièrement raison. Il en est ainsi. 🙂 Suppose que c'est une chaîne délimitée par des virgules au lieu ensuite.
InformationsquelleAutor obeattie

Voici ma transition avec jQuery:

$("#layoutControl .actionList").click(
    function(){
        $("#assetsContainer").fadeOut("fast",function(){
            $(this).removeClass("assetsGrid").addClass("assetsList");
            $("#iconList").attr("src", "/img/bam/listIcon.png");
            $("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
            $(this).fadeIn("fast");
        });
    }
);

InformationsquelleAutor Eugenio

0

Même si vous incluez JqueryUI correctement, ces tous semblent échouer à l'extérieur de FF lorsque vous utilisez la "durée" de paramètre. Causes des erreurs JS dans IE. Je m'en tiendrais aux animate() qui suce.

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

Il n'y a pas de note de la ce dans les docs sur le jqueryui site.

InformationsquelleAutor jozecuervo

$(".employee").hover(function() {
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
    $(this).stop().animate({ backgroundColor: "white" }, "slow");
});

InformationsquelleAutor Thiago Belem

Vous pouvez utiliser des transitions CSS3 pour obtenir cet effet.

a:hover {
    color: red;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

a:link, a:visited {
    color: white;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

InformationsquelleAutor ObjectiveCat

0

Aussi, il n'y a pas de vitesse parameted pour addClass, la vitesse n'existe que pour les effets.

Correcte.

Mais peut-être que ce Plugin peut aider:

animer-à-classe

InformationsquelleAutor Mike Gledhill

Vous devez vous connecter pour publier un commentaire.