JQuery ajouter un fondu à un .addClass
-
01-10-2019 - |
Question
Comment se fanent .addClass et sortir.
Voici le lien -
http://www.bikramyogajoondalup.com.au/ A propos de-bikram-yoga / postures-Bienfaits
et est ici le code -
$(document).ready(function() {
$('#menu li#Q_01,#menu li#Q_03,#menu li#Q_05,#menu li#Q_07,#menu li#Q_09,#menu li#Q_11,#menu li#Q_13').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
$(document).ready(function() {
$('#menu li#Q_02,#menu li#Q_04,#menu li#Q_06,#menu li#Q_08,#menu li#Q_10,#menu li#Q_12').hover(function() {
$(this).addClass('pretty-hover_01');
}, function() {
$(this).removeClass('pretty-hover_01');
});
});
Merci
La solution
Si jQuery UI est une option, vous pouvez utiliser .toggleClass(class, duration)
pour cela.
En outre, vous pouvez probablement vous simplifier la sélection, il ressemble à :even
et :odd
fera le travail en fonction de votre sélection actuelle, comme ceci:
$(function() {
$('#menu li:even').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});
$('#menu li:odd').hover(function() {
$(this).toggleClass('pretty-hover_01', 500);
});
});
Je me rends compte à rebours qui précède semble, mais :even
ne sélectionne premier élément, car il est 0 base, donc même 0e sélectionne, 2ème, 4ème, etc. J'espère que vous serez d'accord, en fait un peu plus facile à maintenir:)
Modifier en fonction des commentaires - Comme bâtons de .toggleclass()
sur les survols rapides, voici une alternative qui fonctionne comme prévu, juste un peu plus:
$('#menu li.post:even').hover(function() {
$(this).stop().animate({ backgroundColor: '#009FDD', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
$('#menu li.post:odd').hover(function() {
$(this).stop().animate({ backgroundColor: '#623A10', color: '#FFF' }, 500);
}, function() {
$(this).stop().animate({ backgroundColor: '#FFFFFF', color: '#666' }, 500);
});
Autres conseils
Si vous voulez effacer les couleurs d'un élément, vous devrez utiliser jQuery UI qui a plus support de pointe pour la décoloration et l'animation (le noyau ne peut jQuery propriétés entières fondu / animées: les couleurs ne fonctionnent pas).
Il prend en charge même animant toutes les propriétés une classe CSS ensemble, donc en utilisant jQuery UI, vous devriez être en mesure d'atteindre l'effet souhaité.
la fonction jQuery .animate est le meilleur pari, bien que cela ne vous laissera pas Animer entre les classes CSS - vous devez spécifier les styles individuels
.Vous serait mieux à l'aide de l'interface utilisateur jQquery, car cela fournirait pour ce type de fonctionnalité, comme indiqué dans le jQuery projet jQuery UI étend la Procédé .animate () en permettant un certain styles non numériques tels que les couleurs à être animé. Le projet comprend également mécanismes pour spécifier des animations par le biais des classes CSS plutôt que attributs individuels