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的边界

回答

相关问题