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

Question

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

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

Answer 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>

Answer 2

只需覆盖回调中的属性

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

Answer 3

animate with css opacity 似乎达到了类似的效果。

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

运行同样的 opacity: 1 以淡入。

信用。