CODEWITHSUNDEEP
jqueryanimationqueuerepeat
klawisz
klawisz

Reputation: 81

jquery - repeat animation for X times

How can I write this more efficiently?

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);
});

​

​ See the jsfiddle here: http://jsfiddle.net/klawisz/nESMD/

Upvotes: 5

Views: 6216

Answers (8)

Roko C. Buljan
Roko C. Buljan

Reputation: 206638

Using jQuery and a 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>

Upvotes: 7

Pranjal Rajput
Pranjal Rajput

Reputation: 43

I may be waking up a dormant thread, but I could do it in a much simpler way.

This example creates a blink effect by varying the opacity between 0.45 and 1.0 (repeated 4 times):

//repeats 4 times
for(i=0;i<4;i++)
    {
        $('#divId').animate({ opacity: 0.45 }, 90)
                   .animate({ opacity: 1.0 },90); 
    }

Upvotes: 0

gabitzish
gabitzish

Reputation: 9691

You can insert a single animation into a 'for' loop and jQuery will run all the animations step by step. This piece of code works:

$(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);
        } 
    }
});

​

Upvotes: 0

jb10210
jb10210

Reputation: 1176

Recursive functions !
http://jsfiddle.net/nESMD/11/

Upvotes: 0

DefyGravity
DefyGravity

Reputation: 6031

Here's an event based way to do it.

  • .on() using a container registers the event now, and for any matching item in the future
  • moved your offs and speed vars into the event.data object
  • this solution you can re-trigger anytime you want, any # of times.

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);

});

Upvotes: 0

Kevin B
Kevin B

Reputation: 95061

I was thinking something more like this so that it can be used for more situations than just these two animations:

$(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 accepts four parameters: selector, show animation options, hide animation options, and speed.

Upvotes: 0

pertz
pertz

Reputation: 393

Check this:

http://jsfiddle.net/mU6gx/

All I did was create an array with the animation sequence, then iterate it.

Upvotes: 0

Aleksandar Vucetic
Aleksandar Vucetic

Reputation: 14953

Something like this?

$(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();
});

Upvotes: 2

Related Questions