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

Answer 1

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

Answer 2

For me, it worked this way:

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

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