Jquery 带侧导航链接的淡入/淡出（显示/隐藏）div

无论有没有淡入淡出效果，我都无法让div正确显示和隐藏。以下是关于JSFIDLE的代码（为了方便起见）：

html:

js:

---

您还没有在小提琴中选择使用jquery库。而且选择器也不正确，它应该是

.sidenav a

，而不是

.title a

。现在，它起作用了。 在JSFIDLE上检查它：

---

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

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

我还没有测试过这个，所以请让我知道它是否有效。基本上，我是在所有具有infozone类的元素上调用淡出，这些元素不是您希望显示的所需元素。

对我来说很好

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

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

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

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