圖片依序顯示

by fu06h96z8

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();
    });
});