JQuery: Children Disappear on Parent Size Animation_问答_开发者

JQuery: Children Disappear on Parent Size Animation

开发者 https://www.devze.com 2023-02-19 13:04 出处：网络

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?

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>

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

It works with your example but you might have unwanted result with a more complex HTML tree.

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.

As part of the animate method, it sets an overflow:hidden style to the parent element. That temporarily hides the child blocks. That is maybe a clue, but I don't know what the best way to avoid it would be.