Question

有关为何有时会使页面跳跃的任何想法。看起来像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>

Answer 1

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

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

Answer 2

fadeOut也hide，大致相当于调用.css('display', 'none')

dislay: none，将元素（及其尺寸）完全隐藏在布局中。

如果您遇到问题，将opacity设置为0可能更安全

Answer 3

您还可以像这样为0px设置高度和填充动画：

$('#main').animate({height:'0px', padding:'0px'}, {duration: 1100});

通过这种方法，站点不会跳跃，因为高度逐渐变小。

Answer 4

很难说没有看到你的HTML，但我想你在主播（<a></a>）上有活跃的类。执行以下操作：

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

FadeOut / FadeIn jQuery跳转

4 个答案: