After JQuery slideUp() finishes the rest of the content jumps into place

Question

I'm trying to do a simple JQuery slideUp of an information message. The problem is that the message slides out cleanly and the animation looks great, but the div below the one I'm sliding out stays put until the animation is done, then just jumps into place. I want the following div to slide up as my message disappears.

I've tried changing almost every aspect of the CSS that I can (e.g. removed position:relative, unfloated the container, etc.), but nothing seems to work.

Here's the Javascript:

$(function() {
    setTimeout(function(){
        $('.flash').slideUp('slow');
      }, 1000);
});

Here's the HTML:

<div class='page-content'>
  <div class='flash'>
    <div class='notice'>I'm testing the flash</div>
  </div>
  <div class='data-table'>
    ... The rest of the page ...
  </div>
</div>

Here's the relevant CSS:

.page-content {
  width: 95%;
  float: left;
  padding: 25px 2.5% 0;
}
.flash {
  background-color: #dcffb9;
  border: 1px solid #78b73f;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 0;
  position: relative;
}
.flash .notice {
  background: url(../images/flash-notice-bg.gif) no-repeat 20px 50%;
  border-bottom: 1px solid #78b73f;
  padding: 20px 0 20px 70px;
}

Any help would be greatly appreciated.

Answer 1

The problem is the margin-bottom: 15px; on the .flash element. Make sure you set your margin and padding to 0.

This is because slideUp works by reducing the height to 0, but it doesn't change the margin. So when the element has finished sliding up, it still has a 15px margin. The last step is to hide the element, at which point the margin disappears too, and you see the jump.

You could keep the margin on the .flash .notice

Answer 2

Following up, the problem is when I include the JQuery for Rails support javascript file. Without it, it slides fine.

JRails redefines slideUp and slideDown for some reason. There's a bug filed against JRails that addresses this exact problem: http://code.google.com/p/ennerchi/issues/detail?id=43. I did as the bug submitter suggested and renamed JRails versions of the slide functions and my stuff works properly now.

Answer 3

This is a known bug in jrails... delete the slideUp/slideDown functions from jrails and PRESTO! Hopefully this will be fixed in the next release of jrails.