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.