圖片依序顯示

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="replay">Play</button>

CSS

.productdemo {
    position: relative;
    width : 300px;
    height: 50px;
    border:1px solid black;
}
.productdemo img {
    display : none; 
}

JavaScript

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

$(window).load(function() {
    $('#replay').click(function() {
        $('.productdemo img').stop(true, true).hide();
        prodFadeIn();
    });
});