jquery fade使用能見度而不是顯示

Question

我目前正在使用jQuery("#addCaseMemberBtn").fadeToggle("fast");，但它會導致內容在完成時跳上/下，因爲它使用的是display。我該如何告訴它使用visibility或通過可視性完成同樣的事情，以便內容不會跳轉。

Answer 1

你可以切換與動畫）不透明度（：

$("button").click(function() { 
 
    $("p:first").animate({opacity:($("p:first").css('opacity')==1)?0:1}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button>fadeToggle p1</button> 
 
<p>This paragraph has a slow, linear fade.</p> 
 
<p>This paragraph has no animation.</p>

Answer 2

您可以使用.animate()並與visibility玩：

$(function() { 
 
    $('#addCaseMemberBtn').animate({ 
 
     visibility: hidden 
 
    }, 1000); 
 
});

#addCaseMemberBtn { 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="addCaseMemberBtn"></div>

.animate() | jQuery API Documentation