javascript - 淡入淡出

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

使用fadeIn/fadeOut与 :visible检测图像是否为当前显示

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