Horizontal overflow with slideDown () / slideUp ()

Question

I'm trying to use slideUp () / slideDown () to animate the expansion of a page element, but I had problems with a relatively positioned icon with a negative (outside the element) placement. While these animations are running, it overflows with hidden rendering, and my icon is cut in half before the animation finishes.

JSFiddle here illustrates my problem. I need a horizontal blue field overflow to be visible during the entire animation, and not magically appear at the end. I also need the vertical overflow to remain hidden.

I tried to change

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

but he seems to be ignored and uses

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

also makes vertical overflow visible.

Any understanding would be greatly appreciated.

Answer 1

Just wrap your divs as: div.clickEvent inside another div.hide

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

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

Answer 2

Try the following:

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