Remove clicking from element when opacity is at 0%

Question

I have some content on a page that needs fading to 0% opacity rather than fading out and having the element being totally removed from the page, so the height and width of the element is still there but just inactive.

The problem is, the objects in that element are still clickable and still fire events. Is there a special way of making them inactive or is it quite simply cursor:default; and preventDefault();?

Gabriel Florit · Accepted Answer · 2016-04-20T21:59:47.717

9

Try changing the content's visibility.

In css,

visibility: hidden

This will hide the element, but will still occupy the same width and height as when fully shown.

Even better, you can fade out the element, and then change its visibility:

$('#target').animate({
      opacity: 0
    },
    1000, // specifies duration of fade (in milliseconds)
    function() {
        // this function will called after the opacity animation has completed
        $(this).css('visibility', 'hidden');
    }
);

edited Apr 20 '16 at 21:59

answered Sep 13 '12 at 21:08

Gabriel Florit

2,886
1
22
36

Thank you! Exactly what I needed. I wondered what the difference was between these two.. display and visibility. – Oliver Tappin Sep 13 '12 at 21:11
an element with display:none wouldn't "reserve" the space, acts like ther's no element there. on the other hand, an item with visibility:hidden will reserve the space, as the element have opacity:0 – Nicolas Rojo Jan 04 '15 at 17:48

score 1 · Answer 2 · edited Jul 06 '17 at 01:41

1

For me, it worked this way:

.dropdown-menu {
    transition: all .32s ease;
    opacity: 0;
    display: block;
    visibility: hidden;
}

.show {
    visibility: visible;
    opacity: 1;
}

edited Jul 06 '17 at 01:41

Pang

9,564
146
81
122

answered Jul 06 '17 at 01:02

Kevo

11
1
3

Remove clicking from element when opacity is at 0%

2 Answers2