Question

主要是工作小提琴 - ＆gt; 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");
});

我的小提琴主要是工作。我有两个问题需要完成。

鼠标悬停/移出动画似乎堆叠，所以如果我将鼠标挥动多次，它将根据注册过多/多次的次数播放动画。有点烦人。我之前使用停止功能悬停，但无法弄清楚如何用它做点击部分。如何将其设置为不叠加/注销注册？

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

我确信这些都是简单的修复。我正在学习。任何帮助表示赞赏！

Answer 1

喜欢这个吗？

<强> Demo

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

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

您可以使用mouseenter/mouseleave（这是实际的悬停）代替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();
});

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

1 个答案: