How to show images 1 second from each other-CodePudding

How can I make the images under #book show bit by bit? Let's say 1 second delay from each other. I tried the following code but seems they are just showing at the same time.

   jQuery(document).ready(function() {
    
    var par = jQuery('#book');
    
    var book1 = jQuery('.book1');
    var book2 = jQuery('.book2');
    var book3 = jQuery('.book3');
    
    jQuery(par).hide();
    
    jQuery( "#clickme" ).click(function() {
        jQuery( "#book" ).show( "slow", function() {
            jQuery(".book1").delay( 2000 ).fadeIn( 400 );
            jQuery(".book2").delay( 4000 ).fadeIn( 400 );
            jQuery(".book3").delay( 8000 ).fadeIn( 400 );
        });
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clickme">
      Click here
    </div>
    
    <div id="book">
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_960_720.jpg" alt="" width="100" height="123">
    
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/two-706896_960_720.jpg" alt="" width="100" height="123">
    
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/three-706895_960_720.jpg" alt="" width="100" height="123">
    </div>

CodePudding user response：

Try this:

jQuery(document).ready(function() {

var par = jQuery('#book');

var book1 = jQuery('.book1, .book2, .book3').hide();
jQuery(par).hide();


jQuery( "#clickme" ).click(function() {
    jQuery( "#book" ).show( "slow", function() {
        jQuery(".book1").delay( 200 ).fadeIn( 600,function(){
            jQuery(".book2").delay( 400 ).fadeIn( 600, function(){
                jQuery(".book3").delay( 600 ).fadeIn( 600 );
            });
        });
    });
});
});

CodePudding user response：

The issue is when you do #book show (onClick) all the children elements appear along with the parent. Explicitly hiding the children will help.

    jQuery(book1).hide();
    jQuery(book2).hide();
    jQuery(book3).hide();

So the fadeIn of children will unHide the children one by one. (based on the delay)

CodePudding user response：

jQuery(document).ready(function() {
    
    var par = jQuery('#book');
    
    var book1 = jQuery('.book1').hide();
    var book2 = jQuery('.book2').hide();
    var book3 = jQuery('.book3').hide();
    
    jQuery(par).hide();
    
    jQuery( "#clickme" ).click(function() {
        jQuery( "#book" ).show( "slow", function() {
            jQuery(".book1").delay( 2000 ).fadeIn( 400 );
            jQuery(".book2").delay( 4000 ).fadeIn( 400 );
            jQuery(".book3").delay( 8000 ).fadeIn( 400 );
        });
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clickme">
      Click here
    </div>
    
    <div id="book">
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_960_720.jpg" alt="" width="100" height="123">
    
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/two-706896_960_720.jpg" alt="" width="100" height="123">
    
    <img  src="https://cdn.pixabay.com/photo/2015/04/04/19/13/three-706895_960_720.jpg" alt="" width="100" height="123">
    </div>