3

これによりページがジャンプすることがあります。フェードアウトが実際に要素 #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>
4

4 に答える 4

10

fadeInfadeOutコンテンツのフェードアウトが終了すると、表示がnoneに設定されます。これにより、要素が消え、ページ上のフローが中断されます。代わりに、不透明度をアニメートしてみてください。

$('.active').click(function(){
    $('#main').animate({opacity: 0}, 1100, function() {
        $(this).load('blank.html', function() {
            $(this).animate({opacity: 1}, 1100);
        });
    });
    return false;
});
于 2013-03-04T22:59:21.077 に答える
2

fadeOutも行いますhide。これは、呼び出しとほぼ同じです。.css('display', 'none')

dislay: none、要素（およびその寸法）をレイアウトから完全に非表示にします。

opacityこれに問題がある場合は、を0に設定する方がおそらく安全です。

于 2013-03-04T22:59:41.640 に答える
1

高さとパディングを0px次のようにアニメーション化することもできます。

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

この方法では、高さがゆっくりと小さくなるため、サイトはジャンプしません。

于 2020-04-10T17:34:55.760 に答える
0

HTML を見ずして言うのは難しいですが、アンカー ( <a></a>) にアクティブなクラスがあると思います。以下をせよ：

$('.active').click(function(e){
       e.preventDefault();
       $('#main').fadeOut(1100, function() {
           $(this).load('blank.html', function() {
               $(this).fadeIn(1100);
           });
       });
       return false;
});
于 2013-03-04T22:57:29.423 に答える