jquery - 表示プロパティの代わりに可視性プロパティを使用する .fadeOut() メソッド

Question

.fadeOut() メソッドは、一致した要素の不透明度をアニメーション化します。opacity が 0 になると、display style プロパティが none に設定されるため、要素はページのレイアウトに影響を与えなくなり、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 
    }); 
})​