Question

您好我使用以下代码创建包含多个DIV元素的幻灯片：

var $ = jQuery.noConflict();
function fadeContent() {
  $(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
    $(this).appendTo($(this).parent());
    fadeContent();
  });
}
fadeContent();

幻灯片放映正常，但有问题。当延迟（2000）触发fadeIn-fadeOut时，页面向上滚动！

我该怎么做才能防止这种情况发生？

Answer 1

我认为当元素淡出时，它不会占用页面上的空间。它下面的元素将取代它，你感觉页面滚动。您可以为要尝试fadeIn / fadeOut的元素设置包装，并为此包装元素提供适当的高度。但这不是一个好的用户体验，因为当元素fadeOut时，页面上会出现空白部分。

Answer 2

因为fadeOut方法结束了元素上的操作设置display:none;。

如果在css中强制显示块，则不会发生这种情况：

的CSS：

.slideshow .asset-abstract:first-child {
    display:block;
}

页面使用JQuery fadeIn - fadeOut向上滚动

2 个答案: