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

天色工作小提琴 - >http://jsfiddle.net/7nrZ6/40/JQuery的：简单的菜单动画和内容显示/隐藏

$('#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个问题来完成它。

鼠标悬停/弹出动画似乎堆叠，所以如果我将鼠标悬停在它上面一堆，它会根据它注册多少次来播放动画。有点讨厌。我之前使用悬停功能悬停，但无法弄清楚如何使用它点击部分。我怎样才能设置它不堆栈/注销？

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

我确定这些都是简单的修复。我正在学习。任何帮助感谢！

来源

2013-07-11 VZM

是否这样？

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(); 
});

来源

2013-07-11 22:11:59 PSL

完美的作品，更优雅。谢谢！我不知道你是否可以帮助解决一个新问题？查看更新的小提琴[链接]（http://jsfiddle.net/Q5QnT/4/）我试图在图库（page-2）div内添加图像滑块。滑块嵌套在另一个div中，并且不会通过单击显示。我试图用文本占位符简化它。 – VZM

问题是点击按钮img点击所以将其改为'$（“＃buttons img”）。click（function（）{（#page-“+ this.id）.show（）。siblings（'div [ id^=“page”]'）。hide（）; }）;' – PSL

完美。非常感谢你！！ – VZM

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

回答

相关问题