JQuery:简单的菜单动画和内容显示/隐藏

Question

主要是工作 fiddle --> http://jsfiddle.net/7nrZ6/40/

    $('#inav .opt').mouseover(function(){
    $(this).animate({opacity:1});
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({opacity:1});
    }
    else
    {
        $(this).animate({opacity:.25});
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {                
        $('.selected').animate({opacity:.25});
        $('.opt').removeClass('selected');
        $(this).addClass('selected'); 
        $(this).animate({opacity:1});
    }
});

$("#buttons img").click(function () {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#page-" + id).css("display", "block");
});

我的 fiddle 大部分都在工作。我有 2 个问题需要完成。

鼠标悬停/移出动画似乎是堆叠的，因此如果我在其上多次挥动鼠标，它将根据注册悬停/移出的次数播放动画。有点烦人。我之前使用悬停和停止功能，但不知道如何用它来完成点击部分。如何将其设置为不堆叠/超出注册？

我希望我的内容 div 首先全部隐藏，然后根据单击的按钮显示/消失。就像现在一样，它们都是可见的。当我将 #pages id 设置为不显示时，单击按钮时没有任何页面会取消隐藏。不确定这种功能是否需要 JS。如果有更简单的方法，请指教。

我确信这些都是简单的修复。我一边走一边学习。任何帮助表示赞赏!

Answer 1

像这样吗？

<强> Demo

您可以使用此 css 规则来隐藏它们:

#pages > div[id^="page"]
{
    display:none;
}

您可以使用 mouseenter/mouseleave (这实际上是hover)而不是 mouseover/mouseout 并使用 .stop( ) 清理以前在频繁悬停时运行的所有动画，并将其简化为:

$('#inav .opt').mouseenter(function(){
    $(this).stop().animate({opacity:1});
}).mouseleave(function(){
    $(this).stop().animate({opacity: $(this).is('.selected') ? 1 : .25});
});

$('.opt').click(function(){
    var $this = $(this);
    if(!$this.is('.selected'))
    {                
        $('.selected').stop().animate({opacity:.25}); 
        $('.opt').removeClass('selected');
        $this.addClass('selected').stop().animate({opacity:1}); 
    }
});

$("#buttons img").click(function () {
    $("#page-" + this.id).show().siblings('div[id^="page"]').hide();
});