Question

我的布局中有一系列图像重叠。我想在单击时将它们隐藏起来，然后隐藏所有图片，然后以相反的方式显示它们，直到全部都显示出来为止。

我有一段简单的代码，可以在单击图像时隐藏这些图像，但是无法弄清楚如何再次显示它们。

 $('.overlap-img').on("click", function() {
   $(this).hide();
 })

有什么办法可以做到这一点？隐藏您单击的图像不是强制性的，您可以在任何位置单击并关闭图像，这样可以更好地控制序列。

谢谢！

Answer 1

第一个：将假hide类添加到隐藏图像会很好

第二个：需要获取图像数和隐藏图像数

第三：使用.each遍历图像，然后您可以使用setTimeout来延迟显示

$(document).ready(function(){
  var interval,
      time_to_hide = 500, // duration to fade/hide the image
      time_to_show = 1000 // duration to fade/show the image
  
  $(document).on("click",'.overlap-img:not(.showing)' , function() {
    
   // add class hide to the clicked image and use hide([duration] , [callback]) 
   $(this).addClass('hide').slideUp( time_to_hide , function(){
     var All_images_Count = $('.overlap-img').length,  // get the all images length
         Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
     if(Hidden_images_Count == All_images_Count){     // if the all images == the hidden images then
        $('.overlap-img.hide').each(function(index){  // loop through the hidden images .. (index) is the index of the image
          var This_image = $(this);                   // $(this) cannot work in setTimeout so you need to define it outside
          interval = setTimeout(function(){
            This_image.removeClass('hide').addClass('showing').slideDown();    // remove the class from the image and show it
            if($('.overlap-img.showing').length == All_images_Count){   // if all images finish showing
              $('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
            }
          } , time_to_show * index);                  // time_to_show * index to make a delay between images on show
        });
     }
   });
 })
});

img{
  position : absolute;
  width : 100%;
  height : 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img"  src="https://via.placeholder.com/100"/>
<img class="overlap-img"  src="https://via.placeholder.com/150"/>
<img class="overlap-img"  src="https://via.placeholder.com/200"/>
<img class="overlap-img"  src="https://via.placeholder.com/250"/>
<img class="overlap-img"  src="https://via.placeholder.com/300"/>
<img class="overlap-img"  src="https://via.placeholder.com/350"/>

还有.showing类，我用它来防止用户单击直到显示所有图像

OP评论：我只是想知道是否有可能，而不是制作图像自动出现，以迫使用户单击以使其出现。因此，使它们隐藏但使它们隐藏的过程相同出现

$(document).ready(function(){
  var interval,
      time_to_hide = 500, // duration to fade/hide the image
      time_to_show = 1000, // duration to fade/show the image
      All_images_Count = $('.overlap-img').length;  // get the all images length
      
  $(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
    
   // add class hide to the clicked image and use hide([duration] , [callback]) 
   $(this).addClass('hide').slideUp( time_to_hide , function(){
     var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
     if(Hidden_images_Count == All_images_Count - 1){     // if the all images == the hidden images then
          $('.overlap-img:eq(0)').addClass('showing');    // Add the class showing to the first image
     }
   });
 });
 $(document).on("click",'.overlap-img.showing' , function() {
    var ThisImage = $(this),  // this image
        NextImage = ThisImage.next('.overlap-img.hide'); // the next image
       NextImage.removeClass('hide').addClass('showing').slideDown();
     var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
     if(showing_images_Count == All_images_Count){     // if the all images == the showing images then
        $('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
     }
 });
});

img{
  position : absolute;
  width : 100%;
  height : 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img"  src="https://via.placeholder.com/100"/>
<img class="overlap-img"  src="https://via.placeholder.com/150"/>
<img class="overlap-img"  src="https://via.placeholder.com/200"/>
<img class="overlap-img"  src="https://via.placeholder.com/250"/>
<img class="overlap-img"  src="https://via.placeholder.com/300"/>
<img class="overlap-img"  src="https://via.placeholder.com/350"/>

单击时隐藏图像序列；完成后再次显示

1 个答案: