FadeOut / FadeIn jQuery跳转

有关为什么这有时会使页面跳跃的任何想法.看起来像fadeOut实际上是删除了元素#main的高度.它的高度在CSS中声明.在FireFox 20中测试过

$('.active').click(function(){
    $('#main').fadeOut(1100,function() {
        $(this).load('blank.html',function() {
            $(this).fadeIn(1100);
        });
    });
    return false;
});

<div id="main" style="margin-bottom:30px;overflow:hidden">
    <div class="slider nivoSlider">
        <img src="1.jpg" alt="" />
        <img src="2.jpg" alt="" />
        <img src="3.jpg" alt="" />
        <img src="4.jpg" alt="" />
    </div>
</div>

<li><a href="blank.html" class="active">Projects (a)</a></li>

解决方法

fadeIn和fadeOut将在显示淡出内容后将显示设置为无,这会使元素消失,并且页面上的流被中断.尝试仅设置不透明度的动画：

$('.active').click(function(){
    $('#main').animate({opacity: 0},1100,function() {
            $(this).animate({opacity: 1},1100);
        });
    });
    return false;
});