CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadein
user123_456
user123_456

Reputation: 5805

How to use fadeIn() if the div is hidden

I need to be able to smoothly fade In the div's which are hidden by default.

I am using this code:

$(".grey_cover").css({
    visibility: "visible"
}).fadeIn(2000, function () {
    $(".popup").css({
        visibility: "visible"
    }).fadeIn(3000);
});

Div's grey_cover and popup have visibility:hidden by default. This code is working but the div's are just pop in out so fast..this milliseconds are not doing anything..I have tried with slow option instead of milliseconds and there is still the same behavior.

I want to fade them slowly.

Upvotes: 0

Views: 144

Answers (4)

Alexander
Alexander

Reputation: 23537

If you can't alter your CSS rules. You can set opacity to 0 along with visibility set to visible. Then .animate() can handle the animation.

$(".grey_cover").css({
    opacity: 0,
    visibility: "visible"
}).animate({
    opacity: 1
}, 2000, function() {
    $(".popup").css({
        opacity: 0,
        visibility: "visible"
    }).animate({
        opacity: 1
    }, 3000);
});

Having said this, using display is better in most cases.

Upvotes: 1

Tomás
Tomás

Reputation: 3561

Use this

css:

.grey_cover {
   visibility: visible;
   display: none;
}

.pop_up {
   visibility: visible;
   display: none;
}

javascript:

 $(".grey_cover").fadeIn(2000, function() { 
     $(".popup").fadeIn(3000);
 });

Upvotes: 1

sevenseacat
sevenseacat

Reputation: 25029

You're making them visible before fading them in - you don't need to make them visible, the fadeIn will handle that.

Upvotes: 0

Niels
Niels

Reputation: 49919

You should not use visibility for this but display: none;. And then remove the jQuery CSS parts. Than you should be fine.

Upvotes: 2

Related Questions