jquery - Animation für x mal wiederholen

Question

Wie kann ich das effizienter schreiben?

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

Siehe jsfiddle hier: http://jsfiddle.net/klawisz/nESMD/

Answer 1

So etwas wie das? diese

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

Check:

http://jsfiddle.net/mU6gx/

Alles, was ich tat, war ein Array mit der Animationssequenz erstellen, dann wiederholen.

Answer 3

Sie können eine einzelne Animation in eine "for" -Schleife einfügen und jQuery führt alle Animationen Schritt für Schritt aus. Dieses Stück Code funktioniert:

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

Ich war etwas mehr wie das Denken, so dass es für mehr Situationen verwendet werden kann, als nur diese zwei Animationen:

$(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 akzeptiert vier Parameter: Selektor, Animationsoptionen anzeigen, Animationsoptionen ausblenden und Geschwindigkeit.

Answer 5

Hier ist ein ereignisbasierter Weg, es zu tun.

• .on() einen Behälter mit registriert das Ereignis jetzt, und für jeden passenden Eintrag in der Zukunft
• Ihre Starts und Geschwindigkeit bewegt Vars in die event.data Objekt
• diese Lösung Sie können re- auslösen wann immer Sie wollen, jede Anzahl von Zeiten.

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

rekursive Funktionen!
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

ich einen schlafenden Thread werden aufwachen kann, aber ich es in eine viel einfachere Art und Weise tun könnte.

diesem Beispiel wird ein Blinkeffekt durch die Opazität zwischen 0,45 variiert und 1,0 (4-mal wiederholt):

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