slideDown() / slideUp()导致水平溢出

Question

我正在尝试使用slideUp() / slideDown()来动画显示页面元素，但是在相对定位的带有负位置（在元素外部）的图标上遇到了问题。当这些动画执行时，它会设置overflow为hidden，导致我的图标被切成两半，直到动画完成。

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

我已经尝试修改，

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

但似乎被忽略了并被使用，

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

也会使垂直溢出可见。

任何见解都将不胜感激。

- E. Allison

Answer 1

只需将您的 div 包装如下：div.clickEvent 放在其他 div.hide 中。

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

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

- mario ruiz

---

在我正在处理的实际项目中，有几个比该 div 更高级的父元素，它们都具有相同的宽度规格。那我是不是也必须将这些父元素包装起来？我担心这会带来不良的副作用。 - E. Allison

E. Allison，问题并不是来自于任何宽度。动画过程的工作原理很简单。当您使用包装解决方案时，实际上是让浏览器处理该宽度。因此，我理解您有一种可重复使用的组件，所以只需要再将其包装在一个div中即可。 - mario ruiz

因为父元素具有相同的固定宽度，将容器的宽度设置为100％无效，因为它会继承父元素的宽度。请参见此处。 - E. Allison

抱歉，刚刚更新了 https://jsfiddle.net/h9gtzp6f/37/ 。那个宽度实际上并不需要，所以我将其删除了。 :) - mario ruiz

Answer 2

试试这个：

$('.clickMe').toggle(function() {
    var div = $(this).parent().find("div:eq(0)").show();
    var parent = div.parent();
    var wrapper = $('<div>', {'class': 'hide wrapper', html: div});
    parent.append(wrapper);
    wrapper.slideDown({duration:1000, complete: function(){parent.append(div);wrapper.remove();}});
}, function() {
    var div = $(this).parent().find("div:eq(0)");
    var parent = div.parent();
    var wrapper = $('<div>', {'class': 'wrapper', html: div});
    parent.append(wrapper);
    wrapper.slideUp({duration:"fast", complete: function(){parent.append(div);wrapper.remove();div.hide()}});
});

- user2704238

---

这与我已经提供的相同（包装解决方案 :)） - mario ruiz

是的，我在你的解决方案出现之前就开始发布了。我想它们是不同的方法，但对于同一个问题，拥有更多的选择也无妨。 - user2704238