淡入/淡出（顯示/隱藏）帶側導航鏈接的div

我無法獲得div顯示&正確隱藏，有或沒有淡入淡出效果。下面是對的jsfiddle（爲方便起見）下面的代碼：http://jsfiddle.net/bUjx7/1/淡入/淡出（顯示/隱藏）帶側導航鏈接的div

HTML：

<div class="container"> 
    <header> 
     <ul class="sidenav"> 
      <li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li> 
      <li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li> 
     </ul> 
    </header> 
    <div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div> 
    <div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div> 
</div>

CSS：

.infozone{ 
    float:left; 
    position:relative; 
    height:400px; 
    width:800px; 
    background-color: #000; 
    background-color: rgba(0,0,0); 
    display:none; 
}

JS：

$('.title a').click(function(){ 
    $('.infozone').fadeOut(550); 
    var region = $(this).attr('data-region');  
    $('#' + region).fadeIn(550); 
})

來源

2013-02-28 Craig

工程對我來說很好http://jsfiddle.net/bUjx7/4/ – chriz 2013-02-28 16:10:23

您沒有選擇使用jquery庫在你的小提琴中。而且選擇器不正確，它應該是.sidenav a而不是.title a。現在，它的工作。檢查它的jsfiddle：http://jsfiddle.net/bUjx7/5/

$('.sidenav a').click(function(){ 
    $('.infozone').fadeOut(550); 
    var region = $(this).attr('data-region');  
    $('#' + region).fadeIn(550); 
});

來源

2013-02-28 16:10:22 Derek

非常感謝。這解決了我的問題。 – Craig 2013-02-28 16:23:02

我的猜測是，淡出效果仍然被觸發的元素，當你試圖在淡化嘗試

$('.title a').click(function(){ 
    var region = $(this).attr('data-region'); 
    $('div').hasClass('infozone').not('#' + region).fadeOut(550);  
    $('#' + region).fadeIn(550); 
});

我還沒有測試，所以請讓我知道它是否有效。基本上我在所有具有infozone類的元素上調用fadeOut，而這些元素不是您希望顯示的所需元素。

來源

2013-02-28 16:18:05 Kevin

淡入/淡出（顯示/隱藏）帶側導航鏈接的div

回答

相關問題