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的：簡單的菜單動畫和內容顯示/隱藏

回答

相關問題