Conceal series of images with a click; reveal them again once completed

I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creating a loop.

Currently, I have some simple code that hides the images upon clicking, but I'm struggling to figure out how to show them again. Here is the snippet:

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

Is there a solution for achieving this effect? It doesn't necessarily need to be limited to hiding the image you click on; it could involve closing all images when any part of the layout is clicked for more control over the sequence.

Thank you for your assistance!

htmljquerycsshideshow

Answer №1

Let's Get Started: Why not consider adding a virtual hide class to efficiently handle hidden images?

Discovery Phase: Calculate the total number of visible and obscured images within the dataset.

Action Strategy: Use the .each method to loop through each image, implementing a delayed presentation using setTimeout.

To avoid premature interaction, utilize the .showing class until all images are fully revealed.

User Query: Can users be prompted to interact by clicking to reveal the images instead of displaying them automatically?

 $(document).ready(function(){
  var interval,
      time_to_hide = 500, 
      time_to_show = 1000;
  
  $(document).on("click", '.overlap-img:not(.showing)', function() {
    
   // Apply hide class and delay presentation
   $(this).addClass('hide').slideUp(time_to_hide, function(){
     var All_images_Count = $('.overlap-img').length;  
     var Hidden_images_Count = $('.overlap-img.hide').length; 
     
     if (Hidden_images_Count == All_images_Count) {     
        $('.overlap-img.hide').each(function(index){  
          var This_image = $(this);                   
          interval = setTimeout(function(){
            This_image.removeClass('hide').addClass('showing').slideDown();    
            if ($('.overlap-img.showing').length == All_images_Count) {   
              $('.overlap-img.showing').removeClass('showing'); 
            }
          }, time_to_show * index);                  
        });
     }
   });
 });
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"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate action after slideUp or slideDown animation finishes

Currently, I am implementing a basic slideUp animation on an object. However, I am struggling with adding an attribute tag to the element once the animation is complete. Any suggestions on how to make this work? if($(this).is(':visible')) { if ...

jquery

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors

Verify the fonts that are functioning correctly

Despite using the "dancing script" Google webfont and adding it through @font-face, font-family, I am unable to see it in the browser. I would like to know how to determine which fonts are correctly uploaded and rendering properly while viewing a website ...

javascripthtmlcssfonts

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not ...

javascripthtmlcss

How to make the 'no data' message more noticeable in jqGrid?

When there is no data, jqGrid typically shows the message 'No records to view' within a pager (I use the top pager for my grids). However, this message can easily be overlooked. I want to change it so that the message appears below the top head ...

jqueryjqgrid

Discover the steps to convert an image to base64 while circumventing the restrictions of the same-origin policy

I've been struggling to convert an image link to base64 in order to store it on the client-side browser (IndexedDB). Despite searching for a solution for days, I have not been able to find one that addresses my issue. While I can successfully convert ...

javascripthtmlimagebase64

Avoid refreshing the page and maintaining the most recent data inputted

On my HTML page, I am trying to implement a button that submits a form using a function. I have set up field validations, and when I click the submit button, it shows an error message but clears out the values I entered and refreshes the form. What I want ...

phpjavascripthtmlmysql

Tips on preventing flickering when using javascript for drag and drop functionality

I have implemented the following JavaScript code (using jQuery) to manage drag and drop functionality in a script I am developing: jsc.ui.dragging = false; jsc.ui.drag_element = {}; $(".drag-target").mousedown(function() { jsc.ui.drag_element = $(thi ...

javascriptjquerydrag-and-drop

Issue with Selenium: Unable to select the WebElement

I am a beginner with selenium and I have encountered a problem while trying to click on a specific element using the following locators. Unfortunately, none of them seem to work as expected and my scripts just skip over that particular line without any err ...

javahtmlcssxpathselenium-webdriver

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

htmlnestedformattingtags

Tips for avoiding HTML <tags> in the document.write function

I am trying to paint the actual HTML code within a tag using JavaScript but escaping it doesn't seem to be working. function displayHTMLString(n){ document.write("'<table>'"); for (i in range(0,n)){ ...

javascripthtml

Transferring UTM parameters to a different page via a button click

Is there a way to extract parameters from a URL after the "?" and add them to a button's href in order to redirect to another landing page? I want to transfer UTM parameters to another page using JavaScript within the button. Original Homepage: Dest ...

javascriptjquerynode.js

Issues with asynchronous JavaScript and XML (AJAX) integration within JavaServer Pages (

I am encountering an issue with my code. When I run the project on localhost:\8081, everything works fine. However, when I upload it to a free host, it does not run properly. run not run Here is the AJAX code snippet: $(document).ready(function(){ ...

javascriptjavajqueryajaxjsp

Choose a textarea in a generic manner

Can anyone help me with selecting a textarea from a specific element on my webpage using jQuery? I've been trying different methods without success. Here is an example of what I have attempted: JsFiddle I wanted to use the :input[type='blah&ap ...

jqueryjquery-selectorstextarea

When jQuery updates the content, the div content disappears temporarily

I am currently using jQuery to generate HTML by fetching data from a JSON file. Below is the code snippet where I create the HTML: $(document).ready(function () { $('#searchForm').submit(function () { var entry= $("#searchFo ...

javascriptjqueryhtml

"Enhancing Your Web Design with Ruby On Rails: Optimal Methods for Integrating CSS

I am a newcomer to Ruby on Rails and I am seeking advice on the best method to incorporate CSS/JS libraries for a specific controller and method in order to avoid unnecessary requests. Currently, I am using the following somewhat inefficient method: - # ...

javascriptcssruby-on-railsassets

Is it possible to create a query selector that is able to find an element based on its attributes while also excluding elements with a specific class name?

Imagine you have elements that look like this: <div class="a b" data-one="1" data-two="2"></div> <div class="c" data-one="1" data-two="2"></div> <div class="b" data-one="1" data-two="2"></div> Is there a way to selec ...

javascripthtmlcssqueryselector

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

I'm working with this HTML setup: <div class="container"> <img class="image" /> <div class="overlay"> <div class="insides">more content here</div> </div> &l ...

javascripthtmlcssimageoverlay

Having difficulty replicating the same effect across all five canvas elements

After following the code provided by j08691 here for canvas, everything worked flawlessly. However, I encountered an error in JavaScript when trying to implement it on multiple canvas elements. As a beginner in JavaScript, I would greatly appreciate any as ...

javascripthtmlcanvas

Iterating over selected checkboxes and setting custom styles in SCSS

As a beginner in SCSS, I am uncertain if it is possible to create a loop function that would compile the following code: I aim to apply certain CSS properties to specific elements when a particular input button is checked. My goal is to achieve this using ...

htmlcsssassstyling