JQuery - повторить анимацию для X раз - PullRequest
Новая
       18

JQuery - повторить анимацию для X раз

5 голосов
/ 27 марта 2012

Как мне написать это более эффективно?

HTML 

<div class="navigation-left">left</div>
<div class="navigation-right">right</div>

Js 

$(document).ready(function(){
    var offs = 0,
        speed = 700;

    $('.navigation-left').animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 0
    }, speed)
    .animate({
        left: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        left: offs,
        opacity: 100
    }, speed);

    $('.navigation-right').animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 0
    }, speed)
    .animate({
        right: 70 + offs,
        opacity: 100
    }, speed)
    .animate({
        right: offs,
        opacity: 100
    }, speed);
});

Смотрите jsfiddle здесь: http://jsfiddle.net/klawisz/nESMD/

Ответы [ 8 ]

7 голосов
/ 27 марта 2012

Использование jQuery и setTimeout()

(function anim (times){
    $('.left').animate({left:70,   opacity:0},700).animate({left:0,  opacity:1},700);
    $('.right').animate({right:70, opacity:0},700).animate({right:0, opacity:1},700);
    if(--times) return setTimeout(anim.bind(this, times), 1400);
}( 5 )); // <--- pass initial N of times
.left, .right {position:absolute; width:50px; height:50px; background:red;}
.left {left:0;}
.right {right:0;}
<div class="left"></div>
<div class="right"></div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
2 голосов
/ 27 марта 2012

Как то так? 

$(document).ready(function(){
    var offs = 0,
        speed = 700,
        times = 10;

    var counter = 0;
    var step = function(){
        if(counter < times) {
            counter++;
            $('.navigation-left').animate({
                left: offs,
                opacity: 0
            }, speed)
            .animate({
                left: 70 + offs,
                opacity: 100
            }, speed);

            $('.navigation-right').animate({
                right: offs,
                opacity: 0
            }, speed)
            .animate({
                right: 70 + offs,
                opacity: 100
            }, speed, null, step);
        }
    };

    step();
});
0 голосов
/ 30 апреля 2013

Возможно, я просыпаюсь в спящем потоке, но я мог бы сделать это намного проще.

В этом примере создается эффект мерцания путем изменения непрозрачности от 0,45 до 1,0 (повторяется 4 раза): 

//repeats 4 times
for(i=0;i<4;i++)
    {
        $('#divId').animate({ opacity: 0.45 }, 90)
                   .animate({ opacity: 1.0 },90); 
    }
0 голосов
/ 27 марта 2012

Рекурсивные функции!
http://jsfiddle.net/nESMD/11/

0 голосов
/ 27 марта 2012

Вот способ, основанный на событиях.

  • .on () с использованием контейнера теперь регистрирует событие, а для любого соответствующего элемента в будущем
  • перемещает ваши выкл и переменные скорости в объект event.data
  • Это решение можно повторно запускать в любое время и в любое количество раз.

HTML 

<div id="container">
    <div class="navigation-left">left</div>
    <div class="navigation-right">right</div>
</div>

JS 

$(document).ready(function(){
   $("#container").on({"left":function(evt,count){
      $(this).animate({
        left: evt.data.offs,
        opacity: 0
    }, evt.data.speed).animate({
        left: 70 + evt.data.offs,
        opacity: 100
    }, evt.data.speed);
      count--;
      if(count>0){
        $(this).trigger("left",count);
      }
   }},".navigation-left",{offs:0,speed:700});

   $("#container").on({"right":function(evt,count){
      $(this).animate({
        right: evt.data.offs,
        opacity: 0
    }, evt.data.speed).animate({
        right: 70 + evt.data.offs,
        opacity: 100
    }, evt.data.speed);
      count--;
      if(count>0){
        $(this).trigger("right",count);
      }
   }},".navigation-right",{offs:0,speed:700});

   $(".navigation-left").trigger("left",5);
   $(".navigation-right").trigger("right",5);

});
0 голосов
/ 27 марта 2012

Я думал о чем-то более похожем на это, чтобы его можно было использовать для большего количества ситуаций, чем только эти две анимации: 

$(document).ready(function() {
    var offs = 0,
        speed = 700;

    var leftOptsHide = {
        left: offs,
        opacity: 0
    };
    var leftOptsShow = {
        left: 70 + offs,
        opacity: 100
    };

    var rightOptsHide = {
        right: offs,
        opacity: 0
    };
    var rightOptsShow = {
        right: 70 + offs,
        opacity: 100
    };

    function animateBox(selector, opts1, opts2, speed) {
        $(selector)
            .animate(opts1, speed)
            .animate(opts2, speed)
            .promise()
            .done(function() {
                animateBox(selector, opts1, opts2, speed);
            });
    }
    animateBox(".navigation-left", leftOptsHide, leftOptsShow, 700);
    animateBox(".navigation-right", rightOptsHide, rightOptsShow, 700);
});​

jsfiddle: http://jsfiddle.net/nESMD/9/

animateBox принимает четыре параметра:селектор, показать параметры анимации, скрыть параметры анимации и скорость.

0 голосов
/ 27 марта 2012

Вы можете вставить одну анимацию в цикл for, и jQuery будет запускать все анимации шаг за шагом. Этот кусок кода работает: 

$(document).ready(function(){
    var offs = 0,
        speed = 700;

    var counts = 3;
    for (var i = 0; i < counts; i++){
        $('.navigation-left').animate({
            left: offs,
            opacity: 0
        }, speed).animate({
            left: 70 + offs,
            opacity: 1
        }, speed);

        $('.navigation-right').animate({
            right: offs,
            opacity: 0
        }, speed).animate({
            right: 70 + offs,
            opacity: 1
        }, speed);
        if (i == counts - 1) {
            $('.navigation-right').animate({
                right: offs,
                opacity: 1
            }, speed);
            $('.navigation-left').animate({
                left: offs,
                opacity: 1
            }, speed);
        } 
    }
});

1004 *

0 голосов
/ 27 марта 2012

Проверьте это:

http://jsfiddle.net/mU6gx/

Все, что я сделал, это создал массив с последовательностью анимации, а затем повторил его.

...