javascript - 使用 slideDown()/slideUp() 进行水平溢出

Question

我正在尝试使用 slideUp()/slideDown() 为页面元素的显示设置动画，但在使用负(元素外部)放置的相对定位图标时遇到了麻烦。当这些动画执行时，它会将溢出设置为隐藏渲染，我的图标被切成两半，直到动画完成。

The JSFiddle here说明了我的问题。我需要蓝色框的水平溢出在整个动画执行过程中可见，而不是神奇地出现在最后。我还需要垂直溢出保持隐藏。

我试过修改，

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow-x", "visible");

但似乎被忽略和使用了，

$(this).parent().find("div:eq(0)").slideDown(1000).css("overflow", "visible");

还使垂直溢出可见。

如有任何见解，我们将不胜感激。

Answer 1

只需将您的 div 包裹起来，例如:将 div.clickEvent 包裹在其他 div.hide 中

<div class="hide"><div class="clickEvent"> 
... 
</div>

https://jsfiddle.net/h9gtzp6f/37/