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

Question

我有一个布局，其中有一系列图像重叠。 我想在单击时将它们一个隐藏起来，在您隐藏所有图片后，以相反的方式显示它们，直到将它们全部显示 - 就像一个循环。

我有一段简单的代码，我设法在单击图像时隐藏图像，但不知道如何再次显示它们。

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

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

提前感谢！

Answer 1

1st：最好将假hide类添加到隐藏的图像中

2nd：需要获取图像的数量和隐藏图像的数量

第三：使用.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"/>