CODEWITHSUNDEEP
jquery
Aaron
Aaron

Reputation: 434

jQuery: why does my delay not work?

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 :)

Upvotes: 1

Views: 119

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382132

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);
});

Upvotes: 3

Alnitak
Alnitak

Reputation: 339816

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();
    });
}

Upvotes: 3

Related Questions