JQuery ajouter un fondu à un .addClass

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

Answer 1

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

Answer 2

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

Answer 3

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