Question

I have a page as follows:

<div id="warning_msg">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo.
<span id="closeerrordiv" class="notify-close">×</span>
</div>
<div id="bigForm2">
    Lots of content here    
</div>
<div id="bigForm...">
</div>
<div id="footer">
</div>

<script type="text/javascript">    
$(document).ready(function() {
    $('#closeerrordiv').click(function() {
        $(this).parent().fadeOut('slow');
    });
});    
</script>

After the user clicks ‘closeerrordiv’, the span content will fadeout.
Now, I need to move all the bottom parts move up.

Howe can I do this?

Answer 1

The ‘jump’ happens because fadeOut() function in the end sets ‘display’ to ‘none’.
This will solve your problem:

$(this).parent().animate({opacity: 0}, 'slow', function() {
  // fade complete.
  $('#warning_msg').slideUp('slow');
});

If you want simultaneous fading and sliding just write:

$(this).parent().fadeOut('slow').slideUp('slow');