JQuery：孩子在父母大小动画上消失答案

【问题标题】：JQuery: Children Disappear on Parent Size AnimationJQuery：孩子在父母大小动画上消失
【发布时间】：2011-07-21 15:44:48
【问题描述】：

在这个层次图的简化版本中，当父元素的大小设置动画时，子元素会消失。有什么办法可以预防吗？

<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>

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

根据 David 的回答，您可以将 overflow: visible !important 添加到您的 CSS 以强制子元素保持可见。

div 
{
    position:absolute;
    width:40px;
    height: 40px;
    background: #f00;
    overflow: visible !important; /* Superset jQuery#animate() 'overflow:hidden'  
}

它适用于您的示例，但使用更复杂的 HTML 树可能会产生不需要的结果。

如果您将鼠标悬停在父级然后是子级上，我注意到一个奇怪的效果：多个元素同时缩放。也许这就是你想要的。如果没有，更好的解决方案可能是更改 HTML 源代码以将“可缩放”内容元素包装在由 div 组成的树结构中。

【讨论】：

@Oliver。你搞定了。我来看看多重缩放问题。
太棒了。优秀的答案。怎么会知道 jQuery 在动画时将溢出设置为隐藏？你怎么知道？为您提供 100 个互联网。
@Mansiemans，正如所指出的，它在大卫的回答中。我只是想从他的陈述中找出解决问题的方法。所以给我们每个人至少 50 个互联网积分 ;-)

【解决方案2】：

作为 animate 方法的一部分，它为父元素设置一个溢出：隐藏样式。这会暂时隐藏子块。这可能是一个线索，但我不知道避免它的最佳方法是什么。

【讨论】：

感谢您为我和奥利弗指明了正确的方向。