JQuery füge eine Verblasung einer .add -Klasse hinzu

Question

Wie verblasse ich .Add -Klassen ein- und aus.

Hier ist der Link -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-tenefits.html

Und hier ist der 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');
  });
});

Vielen Dank

Answer 1

Wenn JQuery UI eine Option ist, können Sie verwenden .toggleClass(class, duration) dafür.

Außerdem können Sie Ihren Selektor wahrscheinlich vereinfachen, es sieht aus wie :even und :odd Erledigt den Job basierend auf Ihrem aktuellen Selektor wie folgt:

$(function() {
  $('#menu li:even').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });
  $('#menu li:odd').hover(function() {
    $(this).toggleClass('pretty-hover_01', 500);
  });
});

Mir ist klar, dass die oben genannten Rückwärts :even Wählt die aus Erste Element, weil es 0 basiert, wählt sogar 0., 2., 4. usw. Ich hoffe, Sie sind zustimmen, es ist ein bisschen einfacher zu pflegen :)

Basierend auf Kommentaren bearbeiten - Seit .toggleclass() Bleib auf schnelle Fahrten, hier ist eine Alternative, die wie erwartet funktioniert, nur ein bisschen länger:

$('#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

Wenn Sie die Farben eines Elements verblassen möchten, müssen Sie verwenden JQuery UI Dies hat eine weiter fortgeschrittene Unterstützung für das Verblassen und Animieren (der Kern -JQuery kann nur verblassen/animieren Integer -Eigenschaften: Farben funktionieren nicht).

Es unterstützt sogar alle Eigenschaften in eine ganze CSS -Klasse, Wenn Sie also die JQuery -Benutzeroberfläche verwenden, sollten Sie in der Lage sein, den gewünschten Effekt zu erzielen.

Answer 3

die jQuery .animieren Funktion ist die beste Wahl, obwohl Sie nicht zwischen CSS -Klassen animieren können - Sie müssen die einzelnen Stile angeben.

Sie würden die JQQuery -Benutzeroberfläche besser verwenden, da dies für diese Art von Funktionalität liefern würde, wie in der JQuery angegeben animieren Seite:

Das JQuery UI Das Projekt erweitert die .animate () -Methode, indem einige nicht numerische Stile wie Farben animiert werden können. Das Projekt enthält auch Mechanismen zur Angabe von Animationen über CSS -Klassen und nicht für einzelne Attribute