jQuery UI: - Switch Class but add a hover effect? -

jQuery UI: - Switch Class but add a hover effect? -

i have next jquery code add together class "p" tags within "li" when hover on them... how can create more interesting adding transition effect rather straight switch?

code:

$(document).ready(function() { $('li').hover(function() { $('p', this).toggleclass('hovered'); }); });

check animate function, can animate transition between 2 classes.

edit: sorry, wrong method. you're looking switchclass method.

here's demo of switchclass. it's useful if have 2 classes, , want switch 1 other. if want add/remove single class, see wouter j's answer.

update: seems you'll need 2 classes work. note switchclass requires jquery ui work. here's example:

html:

<li> <p class="regular">test</p> </li>

css:

p.regular { color:red } p.hovered { color:blue }

javascript:

$(document).ready(function() { $('li').hover(function() { $('p', this).switchclass('regular','hovered', 2000); },function() { $('p', this).switchclass('hovered','regular', 2000); }); });

jquery