jQuery向上滑動CSS邊框導致奇怪的'跳躍'

Question

我有一個負載li s，我滑動使用jQuery和animate()函數。使用slideUp()和slideDown()可以產生與我現在描述的效果相同的效果：li可以很好地滑動，但是當它們的高度爲零時，邊界（頂部和底部，1px）仍然存在，然後立即全部出現。我想知道...是否有一種方法可以讓jQuery獲得邊框不會「卡住」，而是像li或div或其他任何東西一樣平滑地上下滑動。

我此刻的代碼是這樣的：

.animate({ 
    height: 'toggle', 
    margin: 'toggle', 
    padding: 'toggle', 
    opacity: 'toggle' 
}); 

我使用border CSS屬性與'toggle'嘗試。它可以很好地向上滑動，但是當向後滑動時，在緩動動畫結束時，邊框會恢復原狀。

Answer 1

我知道你在說什麼。我之前做過這件事，並且有同樣的問題。解決方法是在邊界div內部爲包含div的元素設置動畫。其效果相同。

例如...

<!--- Flakey ---> 
<div class="border slideMe"> 
    Content here... 
</div> 

<!--- Correct ---> 
<div class="border"> 
    <div class="slideMe"> 
     Content here... 
    </div> 
</div> 

希望這可以節省你一些頭痛。