我该如何更有效地编写它？jquery - 重复动画X次

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/

来源

2012-03-27 klawisz

像这样的事情？

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

来源

2012-03-27 14:08:20

检查：

http://jsfiddle.net/mU6gx/

我所做的只是创建动画序列数组，然后重复它。

来源

2012-03-27 14:14:16 rottz

您可以在'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); 
     } 
    } 
});

来源

2012-03-27 14:20:12 gabitzish

你还必须将对象移到其原始位置 – jb10210 2012-03-27 14:30:14

最初的例子不移动的对象到原来的位置。 – gabitzish 2012-03-27 14:33:33

是的，仔细观察。不透明度也设置为100 – jb10210 2012-03-27 14:43:01

我想更多的东西像这样使得它可以用于不仅仅是这两个动画的更多情况：

$(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接受四个参数：选择器，显示动画选项，隐藏动画选项和速度。

来源

2012-03-27 14:25:31

这是一个基于事件的方式来做到这一点。采用集装箱

。对（）现在登记该事件，并在未来
移动你的取舍和速度的任何匹配项瓦尔到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); 

});

来源

2012-03-27 14:25:37 DefyGravity

http://jsfiddle.net/nESMD/20/ – DefyGravity 2012-03-27 14:47:32

递归函数！
http://jsfiddle.net/nESMD/11/

来源

2012-03-27 14:29:14 jb10210

递归比迭代更无效。 – gabitzish 2012-03-27 14:36:03

jsFiddle demo

var speed = 700; 
var times = 5; 
var loop = setInterval(anim, 800); 
function anim(){ 
    times--; 
    if(times === 0){clearInterval(loop);} 
    $('.navigation-left').animate({left:70,opacity:0},speed).animate({left:0, opacity:1},speed); 
    $('.navigation-right').animate({right:70,opacity:0},speed).animate({right:0, opacity:1},speed); 
} 
anim();

来源

2012-03-27 14:32:55

我可以唤醒休眠的线程，但我可以做一个更简单的方法。

此示例创建通过改变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); 
    }

来源

2013-04-30 12:30:09

jquery - 重复动画X次

回答

HTML

JS

相关问题