Задать вопрос
Alexanevsky
@Alexanevsky
Любительская web-разработка

Как сделать анимацию и зациклить её?

Здравствуйте!

Есть несколько блоков:
<div class="blocks">
   <div class="block1"></div>
   <div class="block2"></div>
   <div class="block3"></div>
</div>

Нужно сделать $('.block1').addClass('active'), через 5 сек. - removeClass и добавить его для block2, ещё через 5 сек. - убрать его и добавить для block3, . Ещё через 5 сек. - убрать для block3 и начать всё сначала. Т.е. зациклить.

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

С уважением,
Александр.
  • Вопрос задан
  • 3857 просмотров
Подписаться 4 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
Можно сделать как то так jsfiddle.net/6go4tmrz/2
Для примера паузу сделал 1 сек чтоб не ждать 5 секунд.
Ответ написан
Комментировать
@LiguidCool
И в чем проблема? Засовывешь addclass, removeclass в бесконечный цикл и вперед.


Наткнулся на свои старые примеры:
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>SlideShow</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/jquery.timer.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var count = 0;
            var current_item = 0;

            // Счетчик
            var timer = $.timer(function () {

                if (current_item === count) {
                    current_item = 0
                } // При достижении конца, начинать сначала
                ++current_item;
                $('.slideshow  img').removeClass('active');
                $('[data-count =' + current_item + ']').addClass('active');

            });
            timer.set({
                time: 1000,
                autostart: true
            });


            $('.slideshow  img').each(function () {
                $(this).attr('data-count', ++count)
            });

        });
    </script>

</head>

<body>
    <div class="slideshow">
        <p id="counter"></p>
        <img src="img/01.jpg" alt="" height="1080" />
        <img src="img/02.jpg" alt="" height="1080" />
        <img src="img/03.jpg" alt="" height="1080" />
        <img src="img/04.jpg" alt="" height="1080" />
    </div>
</body>

</html>

Соответственно теги поочереди получают класс active.
Не уверен, что это самый правильный вариант, да и выдран он из контекста, но он работает.
jquery-timer
Ответ написан
@IoannGrozny
Front-end разработчик
можно рекурсивно: jsfiddle.net/t0te7jwo/2
Ответ написан
Комментировать
Вариант без привязки к классу или количеству элементов: jsfiddle.net/Aliance/zw8t3L2g
Ответ написан
@petya_petrelly
$(function(){
    var $blocks = $('.blocks .block'),
        l = $blocks.length,
    	cur = 0;
    setInterval(function(){
        $blocks.eq(cur).removeClass('active');
        cur < l - 1 ? cur++ : cur = 0;
        $blocks.eq(cur).addClass('active');
    }, 1000);
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы