jquery animated menu: how to get active state

Question

Hi, please can you help a jquery beginner out? I don't really know how to go ahead...

I did a jquery animated menu: look at this. the content loads with ajax, so there's not really a page load.

now i have to do the active item part. to give a clicked item a class "on", I did this:

$navig.click(function() {
    $(this).addClass("on");
    $navig.not(this).removeClass("on");
})

the item with class "on" has to:

• animate to active state (similar to the mouseover state), and keep this
• other items has to animate back to the normal state (when class "on" is removed)
• if you click on a sub item, the parent item has to animate to active state

any ideas how to solve it?

Answer 1

You could make use of the `:animated' selector

$navig.click(function() {
    // turn on current item and animate to blablabla
    $(this).addClass("on").animate({blablabla});
    // turn off others and animate back
    $navig.not(this).removeClass("on").filter(':animated').stop().animate({blablabla});
});

Answer 2

You might get somewhere with CSS animation, like this:

.menuitem { transition: all 1s ease-in-out; }

Support is not very good right now, I'm pretty sure. For Webkit-based browsers it works but with the

-webkit-transition

property instead of transition. Maybe there's similar support for other browsers.