Плавная замена содержимого блока div

Question

Плавная замена содержимого блока div

Рейтинг: 2Ответов: 1Опубликовано: 28.01.2015

У меня есть два блока div, в которых нужно менять содержание (картинки, текст) каждые 4 секунды, т.е. зациклить. Я пробовал применить скрипт jQuery cycle. Вот сайт, где я применил cycle:

$(document).ready(function() {
        var parentTaglineEl = $('#ticker1,#ticker2');
        parentTaglineEl.cycle({
            fx: 'fade',
            speed: 1000,
            timeout: 6000,
            random:  0
        });
    });

Скрипт работает, вот только при загрузке страницы на секунду показывает всё содержимое, наверно, cycle тяжело грузится.

Вопрос:

Существует альтернативный способ менять содержимое блока div? Может, у кого завалялся такой скрипт, поделитесь, пожалуйста.

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

Как написал выше, можно сделать и самому, вот такой пример набросал с заменой текстовых блоков, думаю, проблем с картинками тоже не будет.

HTML:

<div class="text">
    <div class="text-block">Текст 1</div>
    <div class="text-block">Текст 2</div>
    <div class="text-block">Текст 3</div>
    <div class="text-block">Текст 4</div>
</div>

JS:

$(document).ready(function() {
    $('.text .text-block').eq(0).addClass("active").fadeIn(1000); // Показываем первый блок, можно и не первый, если прописать нужную цифру в eq()
    setInterval('blockAnimate();', 5000); // Вызываем функцию для смены блока каждые 5 секунд
});

// Функция для смены блоков, показывает блоки по очереди, начальный блок задаётся выше
function blockAnimate() {
    var length = $('.text .text-block').length - 1;
    $('.text .text-block').each(function(index) {
        if($(this).hasClass('active') && index != length) {
            $(this).removeClass("active").fadeOut(1000).next('.text-block').addClass("active").delay(1000).fadeIn(1000);
            return false;
        } else if (index == length) {
            $(this).removeClass('active').fadeOut(1000);
            $('.text .text-block').eq(0).addClass("active").delay(1000).fadeIn(1000);
            return false;
        }
    });
};

UPD

Убрал задержки в анимации и вставил картинки вместо текста, код почти не изменился (не вижу смысла его выкладывать ещё раз), поэтому вот ссылка на итоговой пример

Плавная замена содержимого блока div

Ответы