淡入淡出图像容器

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属性的按钮并由此被吐出错误。如果您要使用我的解决方案，请不要忘记阅读它。