jquery animated menu: how to get active state
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?
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});
});
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.
精彩评论