Stopping Jquery from applying display:none CSS after a .fadeOut() on element

Question

Im using some Jquery to fadeout an element, however i would like to keep the layout so am trying to apply a visibility:hidden to the CSS class after the fadeOut.

However this doesnt seem to be working, the element is still being set to display:none.

I know i could get around this by adding a wrapping div around the element but to be honest, its a lot of effort and id rather just find a solution through jQuery rather than going back in to edit the HTML

Ive tried the following:

  $("#mmoverlaycenter").fadeOut().css("visibility", "hidden");
  $("#mmoverlaycenter").css("display", "initial");

Reason for doing seperate lines is that declaring multiple CSS changes seemed to keep throwing up syntax errors.

To my mind this should work, however the element ends up with the following styling:

<div id="mmoverlaycenter" style="visibility: hidden; display: none;">

One idea ive had is that the fade animation takes time to complete, so animation starts running, other style properties are applied, then animation finishes and applies display:none.

What do you think?

cheers

You also could `animate()` CSS property `opacity` to set it to 0 and then apply `visibility: hidden;`. — D4V1D, Jun 11 '15 at 13:05

score 1 · Accepted Answer · answered Jun 11 '15 at 13:05

1

Use this:

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css("display", "block");
});

Or still better, remove the display CSS.

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css("display", "");
});

To combine the both:

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css({
        "display": "block",
        "visibility": "hidden"
    });
});

answered Jun 11 '15 at 13:05

Praveen Kumar Purushothaman

164,888
24
203
252

1

perfect, works a charm. Many thanks. Out of interest, just for my own knowledge really, placing a function within a function like this, does the first function invoked wait until its fully completed before the sub function is run? – Ash Jun 11 '15 at 13:29
This is a callback function buddy. This function is executed once the animation is done. This is the right way of calling things. @Ash... – Praveen Kumar Purushothaman Jun 11 '15 at 13:31

score 1 · Answer 2 · answered Jun 11 '15 at 13:07

1

try with done() function ..

$("#mmoverlaycenter").fadeOut().css("visibility", "hidden").done(function(){
                  $(this).css("display", "block");
    });

answered Jun 11 '15 at 13:07

Sarath

2,318
1
12
24

1

That won't work. You need to use the `promise()` method and not set visibility to hidden before animation completes. Anyway then, better is just to use `fadeOut()` complete callback instead. As a side not, using `done()`: `$("#mmoverlaycenter").fadeOut().promise().done(function () { $(this).css({ display: "block", visibility: "hidden" }); });` – A. Wolff Jun 11 '15 at 13:14

score 1 · Answer 3 · answered Jun 11 '15 at 13:08

1

Just animating the transition to an opacity of 0 should do what you want:

$("#mmoverlaycenter").animate({ 
    opacity: 0
});

answered Jun 11 '15 at 13:08

Lee Bailey

3,594
2
18
17

Stopping Jquery from applying display:none CSS after a .fadeOut() on element

3 Answers3