jQuery - 如何在顶部淡出后向上滑动底部？

Question

我有一个页面如下:

<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>

用户点击“closeerrordiv”后，span 内容将会淡出。现在，我需要将所有底部部分向上移动。

我怎样才能做到这一点？

Answer 1

发生“跳转”是因为 fadeOut() 函数最后将“display”设置为“none”。
这将解决您的问题:

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

如果你想要同时淡入淡出和滑动，只需写:

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