Question

请你能帮助一个jquery初学者吗？我真的不知道如何继续...

我做了一个jquery动画菜单：look at this。内容加载了ajax，因此实际上没有页面加载。

现在我必须做活动项目部分。为了点击一个项目“on”，我这样做了：

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

类“on”的项目必须：

动画显示活动状态（类似于鼠标悬停状态），并保留此
其他项目必须动画回到正常状态（当“on”类被删除时）
如果单击子项，则父项必须设置为活动状态的动画

任何想法如何解决？

Answer 1

你可以使用`：animated'选择器

$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

您可能会使用CSS动画，如下所示：

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

现在支持不是很好，我很确定。对于基于Webkit的浏览器，它可以使用

-webkit-transition

属性而不是transition。也许对其他浏览器也有类似的支持。

jquery动画菜单：如何获得活动状态

2 个答案: