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

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

    div { position:absolute; width:40px; height: 40px; background: #f00; }     $(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); }); });  
 
 
 
 
 
 
 
 
 
   

Answer 1

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

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

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

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

Answer 2

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