3

jQueryで何かを作成しましたが、画像をクリックすると問題が発生します。ページの一番下まで完全にスクロールしてからクリックすると、ジャンプすることがわかります。ジャンプを防ぐために複数の方法を試しましたが、うまくいきません。

これが私のコードです：

$('.author').click(function(e) {
    var name = $(this).attr('id') + '-info';

    $('.author-info article').hide();
    $('#' + name).fadeIn();

    $('.author').removeClass('active');
    $(this).addClass('active');

    e.preventDefault();

});

ここにライブリンクがあります - http://sites.lukespoor.com/author/

どんな助けでも大歓迎です

4

1 に答える 1

4

最初の要素がフェードアウトすると、ページの高さが変化するため、ジャンプしています。そのため、ページの一番下までスクロールします。で修正することはできませんe.preventDefault。

親要素に固定の高さを設定します。

.author-info {height:200px;}

問題を修正します。

別の解決策は

.author-info {position:relative;}
.author-info article {position:absolute;top:0;left:0;opacity:0;}

.fadeIn不透明度を1に設定する代わりに、.fadeOut不透明度を0に設定する代わりに、CSSトランジションまたは.animateフェード効果を使用できます。

于 2012-07-15T17:44:00.267 に答える