Разделители исчезают и исчезают

Question

У меня есть меню из 7 элементов. Всякий раз, когда элемент кликается, его содержимое появляется путем затухания. Если щелкнут другой элемент, текущее содержимое исчезает и новое содержимое исчезает. Я применил концепцию к 3 из 7 элементов в моем меню, однако я сталкиваются с 2 проблемами: 1) A не затухает в . 2) Существует проблема синхронизации при затухании и выходе, где содержимое может столкнуться с другим. Любая помощь?

HTML:

<div id="menu" class="menu"> 
     <ul class="headlines"> 
      <li id="item1"onclick="checklist(this)"><button >A</button></li> 
      <li id="item2"><button >B</button></li> 
      <li id="item3"><button >C  </button></li> 
      <li id="item4"><button>D   </button></li> 
      <li id="item5"><button>E </button></li> 
      <li id="item6"><button>F  </button></li> 
      <li id="item7"><button>G  </button></li> 
<!--     <li> <input type="button" value="animation" OnClick="checklist(this)"> </input> 
    </li>--> 
     </ul> 
     </div> 


     <div id="first"> 
<img id="image1" src="http://placehold.it/350x150"/> 
<img id="image2" src="http://placehold.it/350x150"/> 
<img id="image3" src="http://placehold.it/350x150"/> 
<img id="image4" src="http://placehold.it/350x150"/> 
<img id="image5" src="http://placehold.it/350x150"/> 
<img id="image6" src="http://placehold.it/350x150"/> 
<img id="image7" src="http://placehold.it/350x150"/> 
<img id="image8" src="http://placehold.it/350x150"/> 
<img id="image9" src="http://placehold.it/350x150"/> 
<img id="image10"src="http://placehold.it/350x150"/> 
</div> 


     <div id="second"> 
     <img id="image1" src="http://placehold.it/350x150"/> 
<img id="image2" src="http://placehold.it/350x150"/> 
<img id="image3" src="http://placehold.it/350x150"/> 
<img id="image4" src="http://placehold.it/350x150"/> 
<img id="image5" src="http://placehold.it/350x150"/> 
<img id="image6" src="http://placehold.it/350x150"/> 
<img id="image7" src="http://placehold.it/350x150"/> 
<img id="image8" src="http://placehold.it/350x150"/> 
<img id="image9" src="http://placehold.it/350x150"/> 
<img id="image10"src="http://placehold.it/350x150"/> 
    </div> 

     <div id="third"> 
     <img id="image1" src="http://placehold.it/350x150"/> 
<img id="image2" src="http://placehold.it/350x150"/> 
<img id="image3" src="http://placehold.it/350x150"/> 
<img id="image4" src="http://placehold.it/350x150"/> 
<img id="image5" src="http://placehold.it/350x150"/> 
<img id="image6" src="http://placehold.it/350x150"/> 
<img id="image7" src="http://placehold.it/350x150"/> 
<img id="image8" src="http://placehold.it/350x150"/> 
<img id="image9" src="http://placehold.it/350x150"/> 
<img id="image10"src="http://placehold.it/350x150"/> 
</div> 

CSS:

#first 
{ 
    display: none; 
    width: 50%; 
    height: 220px; 
    margin:auto; 
    padding-left: 150px; 
    margin-top: -215px; 

} 
#first img 
{ 
    height: 100px; 
    width: 100px; 
    float:left; 
    margin-right: 5%; 
    cursor: pointer; 
} 

#second 
{ 
    display: none; 
    width: 50%; 
    height: 220px; 
    margin:auto; 
    padding-left: 150px; 
    margin-top: -215px; 

} 
#second img 
{ 
    height: 100px; 
    width: 100px; 
    float:left; 
    margin-right: 5%; 
    cursor: pointer; 
} 

#third 
{ 
    display: none; 
    width: 50%; 
    height: 220px; 
    margin:auto; 
    padding-left: 150px; 
    margin-top: -215px; 

} 
#third img 
{ 
    height: 100px; 
    width: 100px; 
    float:left; 
    margin-right: 5%; 
    cursor: pointer; 
} 

li{ 
    list-style-type: none; 
    font-size: 1.5em; 
    height: 40px; 
    width: 180px; 
    text-align:right;  
    border-style: none; 

} 

.menu{ 

    width:150px; 
    height: 350px; 

    } 

.menu li{ 
position: relative; 
    top:150px; 
    bottom: 0; 
    left: 695px; 
    right:0; 
    margin: auto; 
    border-style:none; 

} 

Jquery:

$(document).on('click','#item1', function() 
{ 
    $("#second. #third").fadeOut(2000, function(){ 
     $("#first").fadeIn(6000); 
    }); 

}); 


$(document).on('click','#item2', function() 
{ 
    $("#first, #third").fadeOut(2000, function(){ 
     $("#second").fadeIn(6000); 
    }); 
}); 


$(document).on('click','#item3', function() 
{ 
    $("#first, #second").fadeOut(2000, function(){ 
     $("#third").fadeIn(6000); 
    }); 
}); 

JSFIDDLE: http://jsfiddle.net/ktyxr77y/

Answer 1

Вот немного другой подход тха t может быть более масштабируемым: JS Fiddle

Кроме того, чтобы обеспечить истинное кроссфейд fadeIn/fadeOut, вы можете добавить позицию absolute к упаковщикам (возможно, потребуется настроить настройку).

Добавлено CSS:

#first, #second, #third { position: absolute;} 

Jquery:

$('li').on('click', function() { 
    //get last character of the li 
    var lastChar = $(this).attr('id').slice(-1); 
    //set which section to change based on the last character of the li's id 

    if (lastChar == 1) { 
     section = $('#first'); 
    } 
    if (lastChar == 2) { 
     section = $('#second'); 
    } 

    if (lastChar == 3) { 
     section = $('#third'); 
    } 

    $('#first, #second, #third').not(section).fadeOut(1000, function() { 
     $(section).fadeIn(1000); 
    }); 
}); 

Примечание: я ускорился переходы только демонстрации.