javascript - 两个重叠元素的fadeIn()和fadeOut()发生时页面跳转

Question

我在 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/

任何帮助表示赞赏

Answer 1

它是跳跃的，因为当第一个元素淡出时，页面的高度会发生变化。因此，它滚动到页面底部。你不能用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淡化效果。