CODEWITHSUNDEEP
jqueryclickopacity
Oliver Tappin
Oliver Tappin

Reputation: 2541

Remove clicking from element when opacity is at 0%

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

Upvotes: 3

Views: 5016

Answers (2)

Kevo
Kevo

Reputation: 11

For me, it worked this way:

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

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

Upvotes: 1

Gabriel Florit
Gabriel Florit

Reputation: 2918

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

Upvotes: 9

Related Questions