JQuery 플립 플러그인 및 애니메이션 큐잉 문제

Question

내 웹 사이트에 일련의 타일이 있습니다 http://zhickman.com/.

마우스를 모든 타일 위로 밀면 이상적으로 뒤집어 되돌릴 수 있습니다. 마우스 오버 이벤트를 사용할 때 타일 위로 미끄러 져 넘어지면 문제가 발생합니다. 그런 다음 타일을 개별적으로 가리키면 여전히 자리 잡기 대신 뒤집기 이벤트가 플립 애니메이션으로 반복해서 발생합니다. 그래서, hover를위한 handlerOut이 호출 될 때까지 뒤집 지 않기 위해 boolean을 추가했습니다. 이것은 타일을 개별적으로 사용할 때 작동하지만, 애니메이션이 완료되기 전에 마우스를 움직이면 타일은 그대로 유지됩니다.

대기열을 사용하고 싶지만 글로벌 fx 대기열을 사용할 때 타일 플립 및 되돌임 플립 애니메이션을 추가하면 타일이 다른 타일에서 애니메이션을 마치기를 기다리게됩니다.

나는 중지를 사용하여 부분적인 기능을 가지고 :

var test = false; 
    $(document).ready(function() { 
     $(".box").hover(function(){ 
      if (test == false) { 
       $(this).stop(false, true).flip({speed: 350, direction:'lr', color:'#c5cac6', content:$(this).children('.info').text()}) 
       test = true; 
      } 
     }, function(){ 
      $(this).stop(false, true).revertFlip(); 
      test = false; 
     }); 
    }); 

을하지만 링크 된 웹 사이트에서 볼 수 있듯이이 원래 반전 애니메이션을 나누기.

내 질문은 :

1) 나는이 큐잉 애니메이션을 사용할 수 있으며, 그것을 할 수있는 적절한 방법은 무엇입니까? 2) 더 쉬운 대안이 있습니까? (단지 잘못 사용하는 것입니까?)

Answer 1

사용중인 플러그인이 CSS 스타일을 적용하지 않는 것 같아서, 실제로는 엉망이라고 생각하는 div 요소를 추가합니다.

저는 CSS와 HTML을 CSS 방식으로 구현했습니다.

나의 주요 목표는 최대한 적은 스타일과 요소를 사용하는 것이 었습니다. 따라서 데모에서는 .info과 .box 요소를 중첩하지 않고 .flipper div로 묶어야합니다.

귀하의 블록 구조는 내가 원래 스타일 중 하나를 변경하지 않은 점을 명심

http://jsfiddle.net/NSUq5/1/을 한 전체 기능 데모를 살펴 보자이

<a href="resume.pdf"> 
     <div class="flipbox-container"> 
       <div class="flipper"> 
       <div class="box resume"><span class="box-header">Résumé</span><br /><br /> 

       </div> 
       <div id="resume-info" class="info"> 
         My current résumé. Contains technical skills, employment history, and education history. 
        </div> 
       </div> 

      </div> 
     </a> 

처럼 보일 것입니다. 애니메이션을 생성하는 코드는 CSS 패널의 맨 아래에 있습니다.

Answer 2

이전 애니메이션을 중지 할 때 사용할 수있는 onBefore 콜백이 있습니다. 이처럼

: 당신은 당신이 플러그인의 onAnimating 및 onEnd 콜백 함수에 설정하면 더 잘 작동 할 수 있습니다 귀하의 test 부울로 뭐

$(this).flip({ 
    speed: 350, 
    direction:'lr', 
    color:'#c5cac6', 
    content:$(this).children('.info').text(), 
    onBefore: function(){ 
     /* 
      do stop here--> 
      $(this).stop(args); 
     */ 
    }, 
}); 

.