淡入/淡出(显示/隐藏)带有侧边导航链接的div

Question

我不能让div正确地显示和隐藏，不管有没有淡入淡出效果。下面是关于jsfiddle的以下代码(为方便起见)：http://jsfiddle.net/bUjx7/1/

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

Answer 1

您还没有选择使用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);
});

Answer 2

我的猜测是，当您尝试淡入时，元素上的淡出效果仍然会被触发。试一试

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

我还没有测试过，所以请让我知道它是否工作。基本上，我在所有包含infozone类的元素上调用fadeOut，这些元素都不是您希望显示的所需元素。