큐 다중 jquery 애니메이션

Question

누군가가 공통 애니메이션 큐를 관리하려고 했습니까?

백엔드 프로그래밍에서 producer/consumer와 같은 것을 얻고 싶습니다. 따라서 일부 애니메이션을 트리거하는 모든 이벤트는 체인과 같이 끊임없이 처리되는 일반 대기열에 필요한 애니메이션 조각을 추가 할 수 있습니다.

무엇이 잘못 되었나요? 실행을 기록하면 올바른 순서로 진행되지만 JS는 여러 애니메이션을 신속하게 트리거 할 때 애니메이션 작업 체인을 완전히 섞습니다.

나는 jsFiddle에 몇 가지 예를 집계했다. 마지막 애니메이션 블록과 실행을 종료하는 기능을 큐에 추가된다

<div id="anims_wrap"> 
    <div class="anim even" id="anim0">0</div> 
    <div class="anim odd" id="anim1">1</div> 
    <div class="anim even" id="anim2">2</div> 
    <div class="anim odd" id="anim3">3</div> 
    <div class="anim even" id="anim4">4</div> 
    <div class="anim odd" id="anim5">5</div> 
    <div class="anim even" id="anim6">6</div> 
    <div class="anim odd" id="anim7">7</div> 
    <div class="anim even" id="anim8">8</div> 
    <div class="anim odd" id="anim9">9</div> 
</div> 

다음 기본있어서, I는 "좌측"위치로 애니메이션되는 절대 위치 ".anim"블록, 간단한 구조를 가지고 일부 3 블록을위한 새로운 애니메이션 조각. 체인이 각 애니메이션이 완료 될 때만 호출됩니다. 자체 애니메이션 대기열이 false로 설정됩니다.

function queueAnimation(animId) {//animId is between 1 & 5, sent by the button triggering the animation.. 

    var animWrap = $("#anims_wrap"); 
    var animId1 = animId - 1; 
    var animId2 = animId + 2; 
    var animId3 = animId === 5 ? 0 : animId + 5; 


    animWrap.queue("anims_queue", function (next) { 
     exitPositionedAnimation(function() { 

      $("#anim" + animId1).addClass("positioned").animate({ 
       left: 50 
      }, { 
       duration: 4000, 
       queue: false 
      }); 
      $("#anim" + animId2).addClass("positioned").animate({ 
       left: 150 
      }, { 
       duration: 6000, 
       queue: false, 
       complete: next 
      }); 
      $("#anim" + animId3).addClass("positioned").animate({ 
       left: 200 
      }, { 
       duration: 5000, 
       queue: false 
      }); 

      console.log(animId1 + "," + animId2 + "," + animId3) 
     }); 
    }); 

    //the only way I found to check if animation is in process.. 
    if (!$._data(animWrap[0], "anims_queue.run")) { 
     animWrap.dequeue("anims_queue"); 
    } 
} 

필자는 원칙을 구현할 수있는만큼 코드를 단순화했습니다. try을 사용하면 여러 개의 애님 버튼을 빠르게 누르기 만하면 믹스 업이 보입니다.

는 어쩌면 난 정말 자바 스크립트에서 너무 많은 기대 :)

Answer 1

내가 문제를 발견 한 것 같은데 ... 일반적으로 현재 작업처럼 보인다!

내 실수는 큐가 실행되고 있는지 확인하는 캐시 JQuery와 내부 데이터에 의존하는 것이었다 :

if (!$._data(animWrap[0], "anims_queue.run")) { 
    animWrap.dequeue("anims_queue"); 
} 

이 캐시는 매우 빠르게 제거되고 새로운 애니메이션 이벤트는 애니메이션이 실제로 갈 때 "디큐는"전화 복제된다 .

Here you can see updated version. 이제는 "isQueueRunning"변수를 유지합니다.이 변수는 "lastQueueFunction"에 의해 false로 설정되며 항상 체인의 끝에서 유지됩니다.

희망이 있으면 도움이 될 것입니다. :)