Javascript 当两个重叠元素的fadeIn（）和fadeOut（）发生时，页面跳转

我在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();

});

这里是直播链接-

---

任何帮助都是值得感激的，因为当第一个元素消失时，页面的高度会改变。因此，它会滚动到页面底部。您无法使用

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

进行淡入淡出效果。

为什么要费心将图像包装在没有href的链接中？将单击事件应用于图像。这是你的

javascript:

中的code>引起的。@LukeSpoor-我猜

最小高度

或某种过渡效果可能会更好。这就是问题所在，但您正在触发溢出或滚动条。如果div高度是动态的，则最好在文档加载时设置父级高度。或者你可以使用绝对位置叠加分割，并使用不透明度隐藏/显示分割。@LukeSpoor有时愚蠢的错误会引起巨大的头痛。我也曾经花了很多时间试图解决同样的问题。最初，一切都归咎于jQuery，后来才意识到问题实际上是在键盘和椅子之间：）