使用slideDown（）/ slideUp（）进行水平溢出

Question

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

这里的JSFiddle说明了我的问题。 我需要在整个动画执行过程中看到蓝色框的水平溢出，而不是在最后神奇地出现。 我还需要垂直溢出才能保持隐藏状态。

我试过修改，

$(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/

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()}});
});