jQuery: why does my delay not work?

Question

I have two images sliding out then I want mycontent div to fade in AFTER the images have gone. The animation works and is being called just not the delay part :(

any ideas why this doesn't work?

function mepage(){
var ele = document.getElementById("btn2");
var ele = document.getElementById("btn3");
var mycont = document.getElementById("mycontent");
if(ele.style.display == "inline-block") {
    $("#btn2").slideUp(1000);
    $("#btn3").slideUp(1000);
    $("#mecontent").delay(1000).css("visibility","visible").fadeIn(400);

}
else {
    $("#btn2").slideDown(1000);
    $("#btn3").slideDown(1000);
    $("#mecontent").css("visibility","hidden");
    ele.style.display = "inline-block";
}

}

Thanks :)

Denys Séguret · Answer 1 · 2012-10-14T07:16:47.757

3

Very few functions are queud by jQuery and css isn't among them.

You could do that :

$("#btn2").slideUp(1000);
$("#btn3").slideUp(1000, function() {
    $("#mecontent").css("visibility","visible").fadeIn(400);
});

or, as I don't know why you changed the visibility before the fadeIn :

$("#btn2").slideUp(1000);
$("#btn3").slideUp(1000, function() {
    $("#mecontent").fadeIn(400);
});

edited Oct 14 '12 at 07:16

answered Oct 13 '12 at 20:20

Denys Séguret

372,613
87
782
758

score 3 · Accepted Answer · edited May 23 '17 at 10:24

The .css function isn't put in the animation queue, so it'll happen straight away. See this answer for a plugin which allows you to queue it.

That said, it's better just to use a "completion" function, and use .show() and .hide() to alter the element's visibility:

if ($(ele).is(':visible')) {
    $("#btn2,#btn3").slideUp(1000, function() {
        $("#mecontent").delay(1000).fadeIn(400);
    });
} else {
    $("#btn2,#btn3").slideDown(1000, function() {
        $("#mecontent").hide();
    });
}

jQuery: why does my delay not work?

2 Answers2