JQuery: Children Disappear on Parent Size Animation

Question

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?

<         


        

Answer 1

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.

Answer 2

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.