jquery - 当不透明度为 0% 时从元素中移除点击

Question

我在页面上有一些内容需要淡出到 0% 的不透明度，而不是淡出并将元素从页面中完全删除，因此元素的高度和宽度仍然存在，但只是处于非活动状态。

问题是，该元素中的对象仍然是可点击的并且仍然会触发事件。cursor:default;有没有一种特殊的方法可以使它们不活动，或者它很简单preventDefault();吗？

Answer 1

尝试更改内容的可见性。

在 CSS 中，

visibility: hidden

这将隐藏元素，但仍将占据与完全显示时相同的宽度和高度。

更好的是，您可以淡出元素，然后更改其可见性：

$('#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

对我来说，它是这样工作的：

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

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