.fadeOut() 方法使用可见性属性而不是显示属性答案

【问题标题】：The .fadeOut() method to use visibility property instead of display property.fadeOut() 方法使用可见性属性而不是显示属性
【发布时间】：2012-08-23 16:13:20
【问题描述】：

.fadeOut() 方法为匹配元素的不透明度设置动画。当 opacity 为 0 时，显示样式属性设置为 none，因此该元素不再影响页面的布局，fadeIn() 也是如此。

我的问题是他们是否可以使用可见性属性，使元素占据页面布局中的空间而不仅仅是可见的？

【问题讨论】：

标签： jquery css fadeout

【解决方案1】：

使用 jQuery 的fadeTo()，然后通过回调设置可见性。示例：

$('#fade').on("click", function(){
    $(this).fadeTo(500, 0, function(){
        $(this).css("visibility", "hidden")
    }) // duration, opacity, callback
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="fade">Click to Fade</a>
<div>This won't move</div>

【讨论】：

不会导致元素可见性隐藏并且元素仍然可以点击:(
只需添加一个回调，在淡入淡出完成时添加属性。答案已更新。
这就是我正在使用的 fadeOut() 参见 jsfiddle.net/gajjuthechamp/BTGeR/1 但我需要更好的解决方案
您正在寻求一种淡出方法，然后将可见性设置为隐藏。这很简单，无需编写自定义 jQuery 插件。
添加 aria-hidden 属性不是更好吗？进行回调：$('selector').css("visibility", "hidden").attr( 'aria-hidden', true );

【解决方案2】：

使用 css opacity 进行动画似乎可以达到类似的效果。

$('#element').animate({opacity: 0}, 1000);

使用 opacity: 1 执行相同的操作以淡入。

Credit.

【讨论】：

这个解决方案对于某些用例来说简单而优雅，但值得一提的是，不透明度为零的元素仍然响应事件（点击、按键等）并参与选项卡-命令。该策略的警告是它具有可访问性含义。见：stackoverflow.com/questions/272360/…

【解决方案3】：

只需覆盖回调中的属性

$('Element').on("click", function() {
    $(this).fadeOut(500, function() {
        $(this).css({"display": "block","visibility": "hidden"});  // <-- Style Overwrite 
    }); 
})

【讨论】：