jquery animate隱藏包含div的邊界

我花了一段時間來追查爲什麼我的邊框正在消失，並且我發現它是jquery的一個bug /功能。這是顯示我的問題的基本簡化案例。我有兩個嵌套的div。我爲動畫製作外部div的大小，並在動畫期間隱藏內部div的邊框。jquery animate隱藏包含div的邊界

<html> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<style> 
    #a { 
     position: absolute; 
     top:50px; 
     left: 100px; 
     width: 88px; 
     height: 144px; 
    } 
    #b { 
     width: 100%; 
     height: 100%; 
     background: yellow; 
     border: 5px solid blue; 
    } 
</style> 
<h1>go</h1> 

<div id="a"> 
    <div id="b"></div> 
</div> 

<script> 
    $(function() { 
     $("h1").click(function() { 
      $("#a").animate({width:300},2000); 
     }); 
    }); 
</script> 
</html>

當您點擊「轉到」時，藍色邊框的一半會在動畫過程中隱藏。這是jQuery的一個特點？還是一個錯誤？有沒有辦法做到這一點，而無需將邊框樣式移動到外部div上？

---- ----更新FWIW 有jQuery的申請這個錯誤：http://bugs.jquery.com/ticket/8515

來源

2011-03-13 Leopd

jQuery的動畫過程中添加overflow: hidden確保寬度尊重。

您的內部元素的邊框溢出了外部元素，因此溢出會導致它被裁剪。
最簡單的解決方案是在動畫之後添加.css('overflow', 'visible')。

來源

2011-03-13 20:18:49 SLaks

我不明白爲什麼jQuery需要更改溢出，但感謝解決方法！ – Leopd 2011-03-13 20:36:08

@Leo：可能會阻止人們抱怨動畫不做任何事情，因爲它們的內容溢出。 – SLaks 2011-03-13 20:43:50

jquery animate隱藏包含div的邊界

回答

相關問題