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 transition 或 .animate 用于淡入淡出效果。