jquery addclass / removeclass ne fonctionne pas toujours lorsque «speed» est défini (événements de souris)

StackOverflow https://stackoverflow.com/questions/607386

  •  03-07-2019
  •  | 
  •  

Question

Dans la 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 je règle une vitesse pour la rendre plus jolie, l'élément reste rouge lorsque je fais rapidement 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, sauf si je vais dans et hors de l'élément très lentement.

Y a-t-il une meilleure façon de faire cela?

Merci d'avance.

Était-ce utile?

La solution

Cela peut être fait, mais vous devez installer le plugin jquery 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");
});

Autres conseils

dans les documents de l'interface utilisateur jQuery :

  

Le noyau des effets de l’interface utilisateur jQuery étend l’API de la classe de base pour pouvoir animer deux classes différentes. Les méthodes suivantes sont modifiées. Ils acceptent maintenant trois paramètres supplémentaires: la vitesse, l'accélération (facultatif) et le rappel.

Donc, @Thomas doit avoir inclus les bibliothèques jQuery et jQuery UI sur sa page, ce qui permet aux paramètres de vitesse et de rappel d’ajouter des classes addClass et removeClass.

Vous utilisez le mauvais événement. Vous voulez: 

$(".employee").hover(function() {
 $(this).addClass("employee_mouseover");
}, function() {
 $(this).removeClass("employee_mouseover");
});

Et il n'y a pas d'argument de rapidité lors de l'ajout ou de la suppression d'une classe.

Oui, faites-le en CSS! 

.employee:hover{background:pink;}

De même, il n'y a pas de vitesse paramétrée pour addClass , elle n'existe que pour les effets.

Il existe un paramètre de durée pour removeClass (http://docs.jquery.com/UI/Effects/removeClass), mais il ne fonctionne pas dans FF. Y a-t-il un problème avec mon code? Je suis nouveau sur JQuery. Je vais essayer d’animer la fonction maintenant.

Ce que j'essaie de faire ici, c'est d'utiliser les ancres, puis de sélectionner l'emplacement de l'ancre de destination lorsque vous cliquez dessus. Voici mon code HTML - 

<ul>
                <li><a href="#caricatures">Caricatures</a></li>
                <li><a href="#sketches">Sketches</a></li>
</ul>

Mon ancre de destination est - 

<a href="#" id="caricatures"><h3>Caricatures</h3></a>

C’est là que je pourrais changer la couleur de fond.

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>

addClass permet d'ajouter des classes CSS à des éléments. Si vous souhaitez modifier une propriété CSS par interpolation, vous devez le faire de manière explicite à l'aide de Effets . .

Votre code: 

$(this).addClass("employee_mouseover", "fast");

Ajoutera deux classes, employee_mouseover et fast à this , ce qui n'est évidemment pas ce que vous recherchez.

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");
        });
    }
);

Même si vous incluez correctement JqueryUI, ils semblent tous échouer en dehors de FF lorsque vous utilisez l'option "durée". paramètre. Provoque des erreurs JS dans IE. Je voudrais coller à animate () qui craint.

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

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

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

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

Il n’ya aucune note de cela dans la documentation du site jqueryui. 

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

Vous pouvez utiliser les 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;
}

De plus, il n'y a pas de vitesse paramétrée pour addClass, la vitesse n'existe que pour les effets.

Corrigez.

Mais peut-être que ce plugin pourrait aider:

animer la classe

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top