Question

我无法让div显示＆amp;正确隐藏，有或没有淡化效果。以下是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，这些元素不是您希望显示的元素。

使用侧面导航链接淡入/淡出（显示/隐藏）div

2 个答案: