jquery - powtórz animację dla X razy

Question

Jak mogę to wydajniej napisać?

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

Zobacz jsfiddle tutaj: http://jsfiddle.net/klawisz/nESMD/

Answer 1

coś takiego?

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

Sprawdź to:

http://jsfiddle.net/mU6gx/

Wszystko zrobiłem było utworzyć tablicę z sekwencji animacji, a następnie iteracyjne go.

Answer 3

Możesz wstawić pojedynczą animację do pętli "for", a jQuery uruchomi wszystkie animacje krok po kroku. Ten fragment kodu działa:

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

Myślałam coś bardziej jak to tak, że może on być stosowany dłużej niż tylko sytuacji tych dwóch animacji:

$(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 akceptuje cztery parametry: selektor, wyświetlanie opcji animacji, ukrywanie opcji animacji i szybkość.

Answer 5

Oto sposób na podstawie zdarzenia, aby to zrobić.

• .on() przy użyciu pojemnik rejestruje zdarzenie teraz, a dla każdego elementu dopasowującego w przyszłości
• przeniósł swoje starty i szybkość vars do event.data sprzeciw
• To rozwiązanie można ponownie uruchamiać w dowolnym momencie, dowolne # razy.

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

Funkcje rekurencyjne!
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 może być wstawania nieaktywnych wątku, ale mogę to zrobić w znacznie prostszy sposób.

Ten przykład tworzy migania efekt poprzez zmianę krycia między 0,45 a 1,0 (powtórzone 4 razy):

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