JavaScript이 애니메이션을 뒤집는 방법, 다른 링크를 클릭하면

Question

$('#home').click(doWork); 

function doWork() { 
     var index = 0; 
     var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); 

     function start() { 
      boxes.eq(index).addClass('animated'); 
      ++index; 
      setTimeout(start, 80); 
     }; 
     start(); 
    } 

링크를 클릭하면이 애니메이션이 시작됩니다. 애니메이션을 마친 후에 다른 링크를 클릭하면이 애니메이션을 뒤집어야합니다. 여기가 반대를 할 인터럽트로 당신은뿐만 아니라 프로세스를 시작할 수 있습니다 코드의

Answer 1

:

(function() { 
    "use strict"; 

    var doWork, 
     index, 
     boxes, 
     numBoxes, 
     workerTO; 

    index = 0; 
    boxes = $(".box1, .box2, .box3, .box4, .box5, .box6"); 
    numBoxes = boxes.length; 
    doWork = function (changer, reverse) { 
     var direction, worker; 

     clearTimeout(workerTO); 

     direction = reverse ? -1 : 1; 
     worker = function() { 
      if (reverse) { 
       if (index < 0) { 
        index = 0; 
        return; 
       } 
      } else { 
       if (index >= numBoxes) { 
        index = numBoxes - 1; 
        return; 
       } 
      } 
      console.log(index); 
      changer(boxes.eq(index)); 
      index += direction; 
      workerTO = setTimeout(worker, 80); 
     }; 
     worker(); 
    }; 

    $("#home").click(function() { 
     doWork(function (el) { 
      el.addClass("animated"); 
     }); 
    }); 

    $("#home2").click(function() { 
     doWork(function (el) { 
      el.removeClass("animated"); 
     }, true); 
    }); 
}()); 

DEMO :http://jsfiddle.net/NcdZT/1/

나는 몇 가지가 응축 될 수있는 확신과 더 효율적으로 만들었지 만 (예 : if) 읽기 쉽고 원하는 것을 얻을 수 있습니다.

setTimeout을 추적하면 프로세스가 중단 될 수 있습니다. 타임 아웃을 80에서 좀 더 눈에 띄게 늘리면 (또는 충분히 빨리 클릭하면) "애니메이션"이 중간에 반전 될 수 있습니다.