0

I have a problem, i need to set the visibility of a div to "hidden" AFTER it has faded out. My code so far:

$('#layer')
    .stop(true, true)
    .animate({
        opacity:"0",
    },1000);

The div is overlaying the whole page, so setting the opacity isn't a solution to make all the elements under the div clickable again.

But when I'm changing the code to this:

$('#layer')
    .stop(true, true)
    .animate({
        opacity:"0",
        visibility: "hidden"
    },1000);

It's faded out and invisible, but still there and interfering with the clickability of my objects under it.

Is there something wrong with the syntax?

Hope you can help me, thanks a lot!

Andy Tanner
  • 81
  • 1
  • 10
  • possible duplicate of [Does opacity:0 have exactly the same effect as visibility:hidden](http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden) – givanse Dec 16 '13 at 19:14

2 Answers2

2

If the object should not be there, use .fadeOut(1000) instead.

  • Accepted - sorry, I thought it was the "arrow up" button, which can only be used after a reputation of 15 - I didn't know about the checkmark. – Andy Tanner Jul 13 '12 at 09:19
0

In CSS, there's a key distinction between visibility and display. The visibility property will make something invisible while still factoring it into the display of the page. Saying visibility: hidden basically puts a cloak of invisibility over your object--other things can still bump in to it, but the object is just invisible.

So, you're looking for display: none which will remove it from the model entirely

JK, I learned something today!

Will
  • 1,621
  • 15
  • 20
  • Whoops, didn't thought about that. Thank you! But I used the solution of Charmander. – Andy Tanner Jul 12 '12 at 20:28
  • 1
    That is incorrect. `visibility: hidden` retains the element's position and sizing, possibly affecting the position and sizing of elements around it, but does not interfere with user interactions. http://jsfiddle.net/eKwJA/ The problem here is rather that of the use of `visibility` with `animate`; `visibility` cannot be animated. http://jsfiddle.net/eKwJA/1/ –  Jul 12 '12 at 20:28