Question

I have the following jQuery code to add a class to “p” tags within an “li” when you hover over them… but how can i make this more interesting by adding a transition effect rather than just a straight switch?

code:

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

Answer 1

Check the animate function, you can animate the transition between two classes.

Edit: sorry, wrong method. What you’re looking for is the switchClass method.

Here’s a demo of the switchClass. It’s useful if you have two classes, and want to switch from one to the other. If you just want to add/remove a single class, see Wouter J’s answer.

Update: It seems you’ll need two classes for this to work. Also note that switchClass requires jQuery UI to work. Here’s an 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);
    });
});