圖片依序顯示

by Occur

HTML

<div class="productdemo">
  <img src="http://placehold.it/30x30">
  <img src="http://placehold.it/30x30">
  <img src="http://placehold.it/30x30">
  <img src="http://placehold.it/30x30">
  <img src="http://placehold.it/30x30">
</div>
<button id="play" type="button">play</button>

CSS

.productdemo {
  border: 1px solid blue;
  min-height: 60px;
  min-width: 200px;
}

.productdemo img {
  display: none;
}

JavaScript

function prodFadeIn() {
  $('.productdemo img').first().fadeIn(1000, function() {
    $(this).next().fadeIn(500, arguments.callee);
  });
}

$(window).load(function() {
  $('#play').click(function() {
    $('.productdemo img').hide();
    prodFadeIn();
  });
});