JQuery:儿童在父母大小的动画上消失了

Question

JQuery:儿童在父母大小的动画上消失了

在这个分层图的简化版本中,子元素在其父级的动画大小时消失.有什么方法可以防止这种情况吗？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Oli*_*let 15

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

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

Run Code Online (Sandbox Code Playgroud)

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

我注意到一个奇怪的效果,如果你鼠标移过父母,然后是孩子:多个元素一次缩放.也许这就是你想要的.如果没有,更好的解决方案可能是更改HTML源以将"zoomable"内容元素包装在由div组成的树结构中.

惊人.很好的答案.怎么会有人知道jQuery在设置动画时将溢出设置为隐藏？你怎么知道？100个互联网给你. (2认同)

Answer 2

Dav*_* L. 8

作为animate方法的一部分,它为父元素设置overflow:hidden样式.那暂时隐藏了儿童积木.这可能是一个线索,但我不知道避免它的最佳方法是什么.

归档时间：	14 年，8 月前
查看次数：	3236 次
最近记录：	14 年，8 月前