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 class="hide"><div class="clickEvent"> 
... 
</div> 

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

Answer 2

他div.hide内div.clickEventを：私はあるに取り組んでいる実際のプロジェクトで

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