Why delay() function did not work in jquery?

Question

I try to do number work with sequence and specific delay .I wrote this codes.I use jquery UI in my page.

   $('#messageDelete').delay(100).toggle("blind");
        $('#messageDelete').delay(900).toggle("blind");
        $('#parentProgress').delay(1000).toggle("fade").remove();

This code worked currently in html page but in my project(MVC) worked with out delay.Please advice.

Answer 1

.delay() only works with methods that use jQuery's animation queue such as animations because it works by inserting a delay animation into the queue so the only things that wait for it are other thing in the animation queue. It does not work with regular jQuery methods as they just get executed right away evne though there's a delay sitting in the animation queue.

To make an actual delay, you can just use a regular setTimeout().

setTimeout(function() {
    $('#messageDelete').toggle("blind");
}, 100);

setTimeout(function() {
    $('#messageDelete').toggle("blind");
}, 900);

setTimeout(function() {
    $('#parentProgress').toggle("fade").remove();
}, 1000);

Other related answers: Jquery delay function not working and jQuery: code stops working after adding delay() and removeClass() and jQuery within a JavaScript for loop not working

Answer 2

I've had this dilemma as well. Have you tried putting them into one line? I don't think jQuery can do multiple delays simultaneously.

Try this: (Maybe give us some more code as well please)

   $('#messageDelete').delay(100).toggle("blind").('#messageDelete').delay(900).toggle("blind").('#parentProgress').delay(1000).toggle("fade").remove();