淡入淡出

Question

如何使div具有所有图像的淡入和淡出？ 首先应隐藏具有图像的div，然后在单击某些按钮后淡入并逐渐淡出。

https://jsfiddle.net/f8juy5pb/3/

<div id="a">
<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>


#a img { 
    float: left;
    width: 15%;
    margin-right: 5%;
    margin-bottom: 6%;
    height: 75px;
    max-width: 100%;
    max-height: 100%;

}


#a:after {
    clear: both;
    content: "";
    display: table;
}

Answer 1

使用带有：visible的 fadeIn / fadeOut来检测图像是否为当前显示

 $('button').click(function() { if ($('img:visible').length) { $('img').fadeOut(); } else { $('img').fadeIn(); } }); 

 #a img { float: left; width: 15%; margin-right: 5%; margin-bottom: 6%; height: 75px; max-width: 100%; max-height: 100%; } #a:after { clear: both; content: ""; display: table; } 

 <div id="a"> <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> <button>fade</button>