Fade in/out (показать/скрыть) divs with side nav links

Question

Я не могу заставить divs показать & спрятать правильно, с эффектами затухания или без них. Вот код ниже на 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; 
} 

ЯШ:

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

Answer 1

Вы не выбираете использование jquery library в вашей скрипке. А также селектор неправильный, он должен быть .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); 
}); 

Я не проверял это так сообщите мне, если это сработает. В основном я вызываю fadeOut на всех элементах, у которых есть класс infozone, которые не являются желаемым элементом, который вы хотите показать.