如何顯示彼此相距1秒的影像

如何讓#book 下的圖片一點一點地顯示？假設彼此延遲 1 秒。我嘗試了以下代碼，但似乎它們只是同時顯示。

   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 class="book1" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_960_720.jpg" alt="" width="100" height="123">
    
    <img class="book2" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/two-706896_960_720.jpg" alt="" width="100" height="123">
    
    <img class="book3" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/three-706895_960_720.jpg" alt="" width="100" height="123">
    </div>

uj5u.com熱心網友回復：

試試這個：

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

uj5u.com熱心網友回復：

問題是當您確實#book顯示 (onClick) 時，所有子元素都與父元素一起出現。明確隱藏孩子會有所幫助。

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

所以子項的淡入會一一取消隱藏子項。（基于延遲）

uj5u.com熱心網友回復：

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 class="book1" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_960_720.jpg" alt="" width="100" height="123">
    
    <img class="book2" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/two-706896_960_720.jpg" alt="" width="100" height="123">
    
    <img class="book3" src="https://cdn.pixabay.com/photo/2015/04/04/19/13/three-706895_960_720.jpg" alt="" width="100" height="123">
    </div>

標籤：查询

上一篇：使用jQuery隱藏父Div

下一篇：批處理檔案FOR回圈改進