CODEWITHSUNDEEP
jquery
q0987
q0987

Reputation: 36012

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

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?

Upvotes: 2

Views: 3447

Answers (4)

Sergey
Sergey

Reputation: 21261

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');

Upvotes: 4

jairajs89
jairajs89

Reputation: 4835

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();
        });
    });
});

Upvotes: 0

DLH
DLH

Reputation: 2821

Add slideUp() right after the fadeOut().

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

Upvotes: -1

Sarfraz
Sarfraz

Reputation: 382909

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.

Upvotes: 1

Related Questions