jQuery .delay() doesn't work

Question

I\'ve the following JavaScript snippet:

$(\"#dashboard\").addClass(\"standby\").delay(3000).removeClass(\"standby\");
$(\".active\").removeClass(\"active\");         


        

Answer 1

Seems like for what you are trying to do, you might want to take a look at CSS transitions:

http://css-tricks.com/almanac/properties/t/transition/

You can still have .addClass(), except now your class will utilize these transition properties, and you won't need .delay().

Answer 2

Delay won't work the way you expect it to on these line:

$("#image1").delay(9000).attr("src", "image/image1.jpg");
$("#image1").delay(9000).attr("src", "image/image2.jpg");

It will run the attribute change immediately. Why? Because the attribute change isn't part of the "animation". Delay can only be used with with animating functions.

If you only need two images, it might be easiest for you to have two images stacked together, and fade them in and out as needed.

If you want to expand this to many images, try using the more robust ".animate" function to fade in and out. "Animate" can be given a callback function that will be called when complete.

Answer 3

.delay() will only delay animations in jQuery. To set an actual delay, you might want to use setTimeout().

let cancelId;
// ...
cancelId = window.setTimeout(function() {
  // ... do stuff ... 
}, 3000);

// If you want to cancel prematurely, use `window.clearTimeout`
if (cancelId) {
  window.clearTimeout(cancelId);
}

This will execute the code in ... do stuff ... in 3 seconds (3000 miliseconds)

Answer 4

Usually we need to do things before removing the standby state, so we remove the class in an ajax callback :

$("#dashboard").addClass("standby");
$.get('urltoget',function(data){
  if(data)
    $("#dashboard").removeClass("standby");
  else
    $("#dashboard").removeClass("standby").addClass('error');
})

Answer 5

All your delays start on $(document).ready();

$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(9000).attr("src", "image/image1.jpg"); 
$("#image1").delay(5000).fadeOut(3000);
$("#image1").delay(9000).attr("src", "image/image2.jpg");
$("#image1").delay(5000).fadeIn(3000);
$("#image1").delay(5000).fadeOut(3000);

Think of it this way. When doc is ready, JS start executing whatever is inside that function, first delay it executes is this: $("#image1").delay(5000).fadeIn(3000);

That will START a delay of 5000 ms and then a fadeOut() with a duration of 3000 ms. That fadeOut is synchronus to the delay, but the next line of code is completely asynchronous to this one.

Then it procceeds to the next line. And so on. It won't wait to your delay to finish, it simply starts counting on the background.

.delay() DOES stack when applied to the same element: JSFiddle

I leave this just in case someone is confused as I was

Answer 6

As stated ... delay won't work the way you expect ... Here is how it works:

$(document).ready(function(){        
    var audio = new Audio('sang3.mp3');
    audio.play();

    $("#image1")
        .hide()
        .attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250")
        .fadeIn(1000)
        .delay(3000)
        .fadeOut(1000)
        .queue(function(next) { 
          $(this).attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250")
          next(); 
        })
        .fadeIn(1000); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="" id="image1">