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来淡化效果。

当出现两个重叠元素的fadeIn（）和fadeOut（）时，页面跳转

1 个答案: