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