Curious about how the .delay() function works in this particular case with jQuery?

What is the reason behind using .delay(3000) as the optimal value to achieve a well-synced 1-second effect with .fadeOut(), rather than adding delays like this: .delay(3000) .delay(4000) .delay(5000)?

The specific part in question:

$(document).ready(function(){
    $('#b').click(function(){
        $('#drz').fadeOut(1000);
        $('#a').delay(1000).fadeOut(1000);
        $('#b').delay(2000).fadeOut(1000);
        /*this below*/
        $('#drz').delay(3000).fadeIn(1000);
        $('#a').delay(3000).fadeIn(1000);
        $('#b').delay(3000).fadeIn(1000);
    });
});
`

$(document).ready(function(){
    $('#b').click(function(){
        $('#drz').fadeOut(1000);
        $('#a').delay(1000).fadeOut(1000);
        $('#b').delay(2000).fadeOut(1000);
        /*this below*/
        $('#drz').delay(3000).fadeIn(1000);
        $('#a').delay(3000).fadeIn(1000);
        $('#b').delay(3000).fadeIn(1000);
    });
});
/* same as above
$(document).ready(function(){
    $('#b').click(function(){
        $('#drz').fadeOut(1000).delay(3000).fadeIn(1000);
        $('#a').delay(1000).fadeOut(1000).delay(3000).fadeIn(1000);
        $('#b').delay(2000).fadeOut(1000).delay(3000).fadeIn(1000);
    });
});
*/
/*  unsuccessful attempt
$(document).ready(function(){
    $('#b').click(function(){
        $('#drz').fadeOut(1000);
        $('#a').delay(1000).fadeOut(1000);
        $('#b').delay(2000).fadeOut(1000);
        $('#drz').delay(3000).fadeIn(1000);
        $('#a').delay(4000).fadeIn(1000);
        $('#b').delay(5000).fadeIn(1000);
    });
});
*/
.drztop {
    position: relative;
    display:block;
    top: 10%;
    left: 10%;
    border-radius:51%;
    background-color: none;
    height: 405px;
    width: 405px;
    border:none;
}
.drz {
    position: absolute;
    display:block;
    top: 0%;
    left: 0%;
    border-radius:51%;
    background-color: yellow;
    height: 400px;
    width: 400px;
    border: 1px solid;
    z-index:-1;
}

.a {
    position: absolute;
    display:block;
    top: 12%;
    left: 12%;
    border-radius:51%;
    background-color: red;
    height: 300px;
    width: 300px;
    border: 3px solid black;
    z-index: 1;
   
}

.b {
    position: absolute;
    display:block;
    top: 25%;
    left: 25%;
    border-radius:51%;
    background-color: pink;
    height: 200px;
    width: 200px;
    border: 3px solid black;
    z-index:2;
    cursor: pointer;
}

#ck {
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green;
    position:absolute;
    top: 30%;
    left: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class='drztop' id='drztop'>
    <div class='drz' id='drz'></div>
    <div class='a' id='a'></div>
    <div class='b' id='b'>
        <p id='ck'>CLICK ME</p>
    </div>
</div>

Answer №1

Due to the additive nature of .delay(), a 3-second delay is added to the end of the current effects queue for each element. Although the same delay is used for all elements before the fade in, it is placed on a different effects queue for each element. This results in unique timing for each element:

  • #drz = 1 second out + 3 second delay + 1 second in = 5 seconds

  • #a = 1 second delay + 1 second out + 3 second delay + 1 second in = 6 seconds

  • #b = 2 second delay + 1 second out + 3 second delay + 1 second in = 7 seconds

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

Utilizing WebVR technology for measuring eye separation distance

I am currently working on developing a WebVR environment using Three.js. I have exported some scenes from Cinema4D and successfully loaded them into my project using the Colladaloader functionality provided by Three.js. As I wanted to test this environment ...

The json_encode() function yields an empty result

I am facing an issue with a PHP script that is supposed to parse an array using the json_encode() method, but it returns a blank output. Here is the PHP code snippet: $companies = $db->getCustomerNames(); print_r($companies) if (!empty($companies)){ $ ...

Utilizing a preset canvas for the renderer can lead to issues

As I dive into tutorials on three.js, I encounter a challenge when using my predefined canvas elements for the renderer. Everything works smoothly if I let three.js create the renderer DOM element. However, when I attempt to retrieve the canvas using getEl ...

Showing JSON information on a web page

I'm currently working on a Hybrid App using the intel XDK platform. In my app, I have set up ajax requests to communicate with my PHP server, which responds with JSON data. Here is an example of the JSON data received from the server: [{ "id":"11", ...

What causes the unexpected behavior of JQuery's .animate() function?

I am currently working on a project that involves creating a div element for the purpose of dragging and dropping files. My goal is to have the height of the div increase when a file is dragged into it, and decrease when the file is dragged out. To achiev ...

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

Angular 4, Trouble: Unable to resolve parameters for StateObservable: (?)

I've been working on writing unit tests for one of my services but keep encountering an error: "Can't resolve all parameters for StateObservable: (?)". As a result, my test is failing. Can someone please help me identify and fix the issue? Here& ...

Is there a way to import an image from a different webpage using HTML?

Is it possible to load an image from another page using the load method? Here's an example: $("#result").load(url, 'tag.attribute') However, I am facing a challenge where I need to retrieve the path of the first image from a list on anothe ...

The unexpected actions while altering the direction of iteration in a 2D array and sorting elements

If we consider a 2D array: ┌─────────┬───┬───┬───┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼───┼───┼───┤ │ 0 │ 2 │ 3 │ 2 │ │ 1 │ 3 │ ...

Spacing between a pair of jQuery datepicker panels

https://i.sstatic.net/Xnbh1.png Is there any way to add spacing between two tables inside the jquery date picker with a common header? I've tried various solutions like adding padding to the parent div, but haven't been able to fix it. Can anyon ...

CSS - apply unique styles to specific nodes based on the class they share

Struggling to apply different styles to the same class when it appears for the second time in the markup using the Subsequent-sibling combinator "~". It seems like there may be a detail I'm missing with the use of "~". Unfortunately, the HTML cannot b ...

Is it possible to modify the background color of a live bootstrap dropdown component?

Looking to jazz up your bootstrap navbar? Check out the code below and see how you can change the color (blue) when an item is clicked and active: https://i.sstatic.net/iPp1W.gif I've tried a bunch of different methods, but none seem to be working ...

Converting JSON data to an Excel file in an Angular application

I'm working on exporting my JSON data to an XLSX file. Despite successfully exporting it, the format in the Excel file isn't quite right. Below is the code I am using: downloadFile() { let Obj = { "data": [12,123], "date": ["2018-10- ...

Have you ever encountered the frustration of being unable to navigate to the next page even after successfully logging in due to issues

I'm currently utilizing Vue and Firebase to build my application. One of the features I want to implement is the redirect method using vue-router. Within my vue-router code, I've included meta: { requiresAuth: true } in multiple pages as middlew ...

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

Creating an overlapping effect between a card deck and a carousel design

My goal is to create a website that resembles the design in this https://i.sstatic.net/WjaIE.png link. You'll notice there's currently a white background behind my yellow background and carousel. Is there a way to change the background color beh ...

Loop through data and use jQuery to insert it into the server

I am encountering an issue with my code as I attempt to insert data from a loop; unfortunately, I keep getting the error message "Uncaught TypeError: Illegal invocation". window.items = ''; _.forEach(cart.items, function(n, key) ...

Guide to utilizing a JavaScript variable within a jQuery GET request using 'data:'

After putting in a lot of effort, I finally managed to make my jquery form work smoothly. The responses are coming back exactly how I want them to. However, there's one issue - I'm currently using static test data to send to the jquery function. ...

An unanticipated syntax issue has been encountered in the React build chunk files and manifest JSON

I am seeking to host my react application from {baseurl}/admin/. After conducting some research, I came across this solution- Here is my Express code- app.use('/admin/', express.static(path.join(__dirname, '/admin/frontend/'))); app.g ...

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

I was attempting to emphasize the clicked navbar by adding an active class. This is the code I tested: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> < ...