left
Geek Answers Handbook

Jquery - re-animation in 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 Jsfiddle here: http://jsfiddle.net/klawisz/nESMD/

+5
source share
8 answers

Using jQuery and 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>
Run codeHide result
+7
source

Something like that?

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

:

http://jsfiddle.net/mU6gx/

, , , .

0

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

0

- , , :

$(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

, .

  • .on () using the container registers the event now and for any suitable element in the future
  • moved your offs and accelerated vars to event.data object li>
  • You can re-run this solution at any time, any number, any number 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);

});
0
source

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

0
source

I may be spilling down a thread, but I could make it much easier.

This example creates a blinking effect, changing 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); 
    }
0
source

More articles: