Horizontal Overflow with slideDown() / slideUp()

Question

I am trying to use the slideUp() / slideDown() to animate the revelation of a page element but have had trouble with a relatively positioned icon with a negative (outside the element) placement. While these animations execute it sets overflow to hidden rendering my icon cut in half until the animation completes.

The JSFiddle here illustrates my issue. I need the horizontal overflow of the blue box to be visible during the whole execution of the animation instead of magically appearing at the end. I also need the vertical overflow to remain hidden.

I've tried amending,

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

but it seems to be ignored and using,

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

also makes the vertical overflow visible.

Any insight would be greatly appreciated.

Answer 1

Just wrap your divs like : div.clickEvent inside other div.hide

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

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

Answer 2

Try this:

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