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

Posted 2023-02-21

【中文标题】.fadeOut() 方法使用可见性属性而不是显示属性

【英文标题】：The .fadeOut() method to use visibility property instead of display property

【发布时间】：2012-08-23 16:13:20

【问题描述】：

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

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

【参考方案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.

【讨论】：

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

【参考方案3】：

只需覆盖回调中的属性

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