jQuery .delay() doesn't work

Question

I\'ve the following JavaScript snippet:

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


        

Answer 1

delay will only work on actions that go through the animation pipeline, and won't have an influence on the timing of instant atomic operations like that. In order to delay things such as adding or removing classes, then you can use setTimeout.

the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue.

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Answer 2

Try utilizing .queue()

  $("#image1").delay(5000).fadeIn(3000, function() {
      $(this).delay(9000, "task" ).queue("task", function() {
        $(this).attr("src", "image/image1.jpg")
        .delay(5000).fadeOut(3000, function() {
          $(this).delay(9000, "task")
          .queue("task", function() {
            $(this).attr("src", "image/image2.jpg")
            .delay(5000).fadeIn(3000, function() {
               $(this).delay(5000).fadeOut(3000)
            })
          }).dequeue("task")
        });
      }).dequeue("task")
    });