JQuery：孩子在父尺寸动画上消失 [英] JQuery: Children Disappear on Parent Size Animation
问题描述
在此简化版本的分层图中，子元素在其父元素的大小为动画时消失。有什么办法防止这种情况？
In this simplified version of a hierarchical diagram, child elements disappear when their parent's size is animated. Is there any way to prevent this?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
div
{
position:absolute;
width:40px;
height: 40px;
background: #f00;
}
</style>
</head>
<body>
<script language="javascript">
$(document).ready(function (e) {
$('div').hover(function (e) {
e.stopPropagation();
$(e.target).animate({ width: "100px", height: "100px" }, 400).children('p').fadeIn(1000);
}, function (e) {
e.stopPropagation();
$(e.target).animate({ width: "40px", height: "40px" }, 500).children('p').fadeOut(200);
});
});
</script>
<div style="top:50px; left:104px; ">
<div style="top:78px; left:85px; "></div>
<div style="top:78px; left:6px; "></div>
<div style="top:79px; left:-74px; "></div>
<div style="top:78px; left:171px; ">
<div style="top:93px; left:-58px; "></div>
<div style="top:98px; left:8px; "></div>
<div style="top:93px; left:69px; "></div>
</div>
</div>
</body>
</html>
推荐答案
根据David的回答， code> overflow：visible！important 到您的CSS，以强制子元素保持可见。
Based on the answer from David, you can add overflow: visible !important to your CSS to force the children elements to remain visible.
div
{
position:absolute;
width:40px;
height: 40px;
background: #f00;
overflow: visible !important; /* Superset jQuery#animate() 'overflow:hidden'
}
我注意到一个奇怪的效果，如果你鼠标放在一个父，然后孩子们：多元素放大一次。也许这是你想要的。如果没有，一个更好的解决方案可能是更改HTML源，将一个可缩放内容元素包装在由divs形成的树结构中。
I notice a strange effect if you mouse over a parent then the children: multiple element zoomed at once. Perhaps it is what you want. If not, a better solution might be to change the HTML source to wrap a 'zoomable' content element inside a tree structure formed of divs.
这篇关于JQuery：孩子在父尺寸动画上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
