jquery Fade hinzufügen zu einer .addClass

Question

Wie verbinde ich .addClass ein- und ausblendbar. Hier

ist der Link -

http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.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'); 
    }); 
}); 

Dank

Answer 1

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

Auch können Sie wahrscheinlich Ihre Wähler vereinfachen, sieht es aus wie :even und :odd wird die Arbeit auf der Grundlage Ihrer aktuellen Selektor, wie folgt aus:

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

Ich weiß, das oben nach hinten scheint, aber :even auswählt das erste Element, weil es 0 basiert, so wählt auch der 0., 2., 4., etc. ich hoffe, Sie werden mir zustimmen, macht es etwas einfacher zu warten :)

bearbeiten basierend auf Kommentare - Da .toggleclass() Sticks auf schnelle schwebt, hier ist eine Alternative, die länger als erwartet, nur ein bisschen funktioniert:

$('#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 wollen, werden Sie muss jQuery UI verwenden, die erweiterte Unterstützung für Fading und Animation bietet (der Core jQuery kann nur Integer-Eigenschaften einblenden/ausblenden: Farben don arbeite nicht).

Es unterstützt sogar die Animation aller Eigenschaften in an entire CSS class, so dass Sie mithilfe von jQuery UI den gewünschten Effekt erzielen können.

Answer 3

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

Sie wäre besser, die jQquery UI, da dies für diese Art von Funktionalität bieten würde, wie in der jQuery animate Seite angegeben:

Das jQuery UI Projekt erweitert das .animate() -Methode, indem einige nicht-numerische Stile wie Farben zu animiert werden. Das Projekt umfasst auch Mechanismen für Animationen durch CSS-Klassen statt einzelne Angabe Attribute