jquery - Ripeti animazione per X volte

Question

Come posso scrivere in modo più efficiente?

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

Vedere la jsfiddle qui: http://jsfiddle.net/klawisz/nESMD/

Answer 1

qualcosa di simile?

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

Controllare questo:

http://jsfiddle.net/mU6gx/

Tutto quello che ho fatto è stato creare una matrice con la sequenza di animazione, quindi scorrere esso.

Answer 3

È possibile inserire una singola animazione in un ciclo "for" e jQuery eseguirà tutte le animazioni passo dopo passo. Questo pezzo di codice funziona:

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

Stavo pensando qualcosa di più simile a questo in modo che possa essere utilizzato per più situazioni che solo queste due animazioni:

$(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 accetta quattro parametri: selettore, mostra le opzioni di animazione, nasconde le opzioni di animazione e la velocità.

Answer 5

Ecco un modo basato sugli eventi per farlo.

• .on() utilizzando un contenitore registra l'evento ora, e per qualsiasi elemento corrispondente in futuro
• spostato il tuo off e velocità vars nelle event.data oggetto
• questa soluzione è possibile ri- innescare ogni volta che vuoi, qualsiasi # di volte.

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

funzioni ricorsive!
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

I può essere svegliato un filo sospeso, ma ho potuto farlo in un modo molto più semplice.

Questo esempio crea un effetto batter variando l'opacità tra 0,45 e 1,0 (ripetuto 4 volte):

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