jquery - repetir la animación X veces

Question

¿Cómo puedo escribir esto de manera más eficiente?

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

Ver el jsFiddle aquí: http://jsfiddle.net/klawisz/nESMD/

Answer 1

Algo como esto?

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

Answer 2

Comprobar esto:

http://jsfiddle.net/mU6gx/

Todo lo que hice fue crear una matriz con la secuencia de animación, a continuación, repetir la misma.

Answer 3

Puede insertar una sola animación en un bucle 'for' y jQuery ejecutará todas las animaciones paso a paso. Esta pieza de código funciona:

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

Answer 4

que estaba pensando algo más parecido a esto de modo que se puede utilizar para más situaciones que sólo estas dos animaciones:

$(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 acepta cuatro parámetros: selector, mostrar opciones de animación, ocultar opciones de animación y velocidad.

Answer 5

Aquí hay una forma basada en eventos para hacerlo.

• .on() usando un recipiente registra el evento ahora, y para cualquier elemento coincidente en el futuro
• trasladó sus despegues y velocidad en las vars event.data objeto
• esta solución puede volver a disparar cada vez que lo desee, cualquier número de veces.

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

}); 

Answer 6

funciones recursivas!
http://jsfiddle.net/nESMD/11/

Answer 7

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

Answer 8

puedo estar despertando un hilo en estado latente, pero que podría hacerlo de una manera mucho más sencilla.

este ejemplo se crea un efecto de abrir y cerrar mediante la variación de la opacidad entre 0,45 y 1,0 (repetidos 4 veces):

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