JQuery FadeIn FadeOut делает прокрутку страницы - PullRequest
Новая
       11

JQuery FadeIn FadeOut делает прокрутку страницы

5 голосов
/ 28 сентября 2011

У меня есть веб-сайт с поддержкой WordPress, на котором я хочу создать специальный блок. В этом блоке будут появляться статьи, исчезающие одна за другой. Я получил его с помощью fadeIn и fadeOut API jQuery, но есть проблема с реализацией.

Вот код, который у меня есть - 

var count=0;
var sticky_count=<?php echo count($sticky);?>;

jQuery(document).ready(featured_block);

function featured_block() {   
    jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback);
}

function callback() {
    count++;
    jQuery(".featured" + count % sticky_count).fadeIn().delay(5000);
    jQuery(".featured" + count % sticky_count).fadeOut(callback);
}

Эффект fadeIn - fadeOut работает нормально до тех пор, пока пользователь не перейдет к нижней части страницы. Когда пользователь находится внизу страницы, вся страница прокручивается вверх, когда происходит переключение фейдера.

Вы можете увидеть это в действии на http://www.ronakg.com

Пожалуйста, посоветуйте, как мне избежать прокрутки страницы.

РЕДАКТИРОВАТЬ: Вот как выглядит HTML-код - 

<div class="featured0">
    ...
</div>

<div class="featured1" style="display:none">
    ...
</div>

...

Ответы [ 2 ]

5 голосов
/ 28 сентября 2011

Попробуйте присвоить содержащему элементу блоков, которые постепенно исчезают, и статический атрибут height: с помощью CSS.

Обернуть <div id="featured"> блок другим делителем. 

<div id="rotator" style="height: 340px;">
    <div id="featured">
     ...
    </div>
</div>
1 голос
/ 18 сентября 2015

Если вы используете <a> с href, равным "#", просто поставьте return false; в конце вашей функции featured_block, которая должна решить проблему.

...