淡入淡出

Question

How to make the div with all of the images fade in and fade out at once? The div with the images should at first be hidden, then fade in after clicking some button then fade out.

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

Use fadeIn / fadeOut with :visible to detect if the images are current display or not

 $('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>