Horizontaler Überlauf mit slideDown()/slideUp()

Question

Ich versuche die slideUp()/slideDown() zu verwenden, um die Offenbarung eines Seitenelements zu animieren, hatte aber Probleme mit einem relativ positionierten Symbol mit einem Negativ (außerhalb des Elements)) Platzierung. Während diese Animationen ausgeführt werden, wird der Überlauf auf das ausgeblendete Rendering gesetzt. Mein Symbol wird halbiert, bis die Animation abgeschlossen ist.

The JSFiddle here veranschaulicht mein Problem. Ich brauche den horizontalen Überlauf der blauen Box, um während der gesamten Ausführung der Animation sichtbar zu sein, anstatt magisch am Ende zu erscheinen. Ich brauche auch den vertikalen Überlauf, um versteckt zu bleiben.

ich Änderung habe versucht,

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

aber es scheint, ignoriert und unter Verwendung werden

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

macht auch die vertikale Überlauf sichtbar.

Jeder Einblick würde sehr geschätzt werden.

Answer 1

wickeln Sie Ihre divs wie: div.clickEvent in andere div.hide

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

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

Answer 2

starten:

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