淡入淡出圖像容器

Question

我有一個7個元素的菜單。無論何時單擊一個元素，其內容都將通過淡入來顯示。如果單擊了另一個元素，當前內容會淡出並且新內容淡入。 我將該概念應用於菜單中7個元素中的3個，但是我面臨一些問題，比如某些內容不退色，延遲淡入淡出內容等問題，導致內容之間發生衝突，無論如何要在菜單的所有元素上應用工作解決方案？

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：https://jsfiddle.net/co5tpz2p/1/

Answer 1

OK，不得不做的HTML一些劇變，但永遠你現在正在工作。檢查updated fiddle。

的新方法是現在，我們有一個#container DIV它負責的變淡，而內部的div（#first，#second和#third）僅示出/根據哪個按鈕被點擊隱藏。

注：我除去在撥弄沒有定義A的自checklist功能onclick屬性的按鈕並由此被吐出錯誤。如果您要使用我的解決方案，請不要忘記閱讀它。