jQuery SlideDown and Border - Strange jump

Question

When I use jQuery's SlideDown feature on an element that has a border, I do have a problem with a strange jump.

Here's a fiddle to demonstrate what I mean: http://jsfiddle.net/Complexity/um9xj/ I've placed the duration on 700 just for testing purposes

$(element).slideDown({
    duration: 700
}).parent().addClass("active");

When you click the new items button you see the behaviour that I mean. I hope that there is a very simple solution to it.

Answer 1

Try this:

Demo

It looks like as this is being animated down, the margin-top is applied and it jumps down a pixel.

Edit - the left border issue looks to be because you're positioning the menucontents element left:-4px which puts it outside of the menu element. This isn't an issue until you do the slideDown() animation and it automatically sets menu to overflow:hidden a simple fix is to move the positioning to the parent element.

CSS:

.icon .menu { 
   box-shadow: 0 0 0 #888; 
   display: none; 
   left:0px;
   top: 60px;
  /* margin-top:-1px; */
}

.menucontents {
  //other styles

 /* left: -4px */
}

Answer 2

The jQuery slideUp and slideDown animations animate the height of the content box, the margin-top , margin-bottom , padding-top , and padding-bottom . Your margin-top: -1px was getting animated but can only be 1 or 0, which is why it was jumping halfway through. Getting rid of margin-top will fix this. If you would like to avoid changing your CSS, you can override the margin editing like this:

$(element).slideDown({
    duration: 700,
    progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");

The progress function is called each frame of the animation and will overwrite jQuery's changes to your margin

EDIT: I've tried experimenting with overwriting overflow, but for reasons I can't determine, it isn't rendering properly. I recommend a CSS edit for your second problem. Since you want to position the menu, just use the outer-most div to modify your positioning and let the inner divs only worry about content:

.icon .menu {
    box-shadow: 0 0 0 #888;
    display: none;
    left: 0;
    margin-top: -1px;
}

.menucontents {
    padding: 1px;
    padding-left: 2px;
    z-index: 100;
    background-color: white;
    /* left: -4px; *
    ...