1

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

我的小提琴大部分时间都在工作。我有 2 个问题要完成。

mouseover/out 动画似乎是堆叠的，所以如果我在它上面挥动鼠标很多次，它会根据它注册 over/out 的次数来播放动画。有点烦人。我之前使用过带有停止功能的悬停，但无法弄清楚如何使用它进行点击部分。如何将其设置为不堆叠/超出注册？

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

我相信这些都是简单的修复。我边走边学。任何帮助表示赞赏！

4

1 回答 1

3

像这样？

演示

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

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

您可以使用mouseenter/mouseleave(This is actual 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();
});
于 2013-07-11T22:11:59.880 回答