jQuery - How to slide the bottom part up after the top part is fadeout?

Question

Hello all,

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

Specify the callback function to fadeOut like this to slide up the element after fading completes:

$(this).parent().fadeOut('slow', function(){
  $('#element_id').slideUp('slow');
});

Where element_id is the id of the element you want to move/slide up.

Answer 2

Add slideUp() right after the fadeOut().

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

Answer 3

im not sure what you mean by what you said.

it sounds like you want the 'x' to fade out and then slide out the warning message. to do that do the following javascript.

$(document).ready(function() {
    $('#closeerrordiv').click(function() {
        $(this).fadeOut('slow',function(){
            $(this).parent().slideUp();
        });
    });
});

Answer 4

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');
$(this).parent().slideUp('slow');