Страница прокручивается вверх с использованием JQuery fadeIn - fadeOut

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, и предоставить соответствующую высоту этому элементу оболочки.Но это не очень хороший UX, потому что когда элемент исчезнет, ​​на странице будет пустой раздел.

Answer 2

Это потому, что метод fadeOut завершает операции настройки display:none; для элемента.

Если вы принудительно установите блок отображения в css, этого не произойдет:

Css:

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