velocity.js를 사용할 때 애니메이션을 대기열에 넣을 수 있습니까?

Question

나는 푸시 메뉴가있는 프로젝트를 작업 중입니다. 콘텐츠 div가 슬라이드되면 화면에 들어갈 때 메뉴 버튼에 약간의 애니메이션이 생깁니다. 오래 걸리거나 아무것도하지 않지만 사용자가 메뉴를 열거 나 연속적으로 열거 나 닫으면 목록에있는 항목이 사라지고 잘못된 순서로 다시 나타나기 시작합니다. 새로운 애니메이션 콜은 오래된 애니메이션을 취소하고 일반적으로 사물의 순서를 엉망으로 만들기 때문에 이것이라고 생각합니다.

이상적으로는 애니메이션이 항상 올바르게 작동하도록 (예 : 메뉴가 열리면 모든 이전 애니메이션을 지우고 시작 애니메이션 만 재생)하는 것이 좋습니다.

그러나 최소한 메뉴를 열 때 메뉴의 요소가 무작위로 사라지지 않도록 각 요소를 올바르게 큐에 넣을 수 있다면 만족할 것입니다. 정상적으로 배경 이미지를 가지고 있기 때문에

http://jsfiddle.net/9t10zr6m/1/

상위 사업부는 투명 : 여기

문제의 바이올린입니다. 또한 최상위 div 아래에서 무슨 일이 벌어지는지를 볼 수 있다면 메뉴 문제를 더 쉽게 볼 수 있다고 생각했기 때문입니다. 여기

는 관련 jQuery 코드입니다 :

$(document).ready(function() { 
$(".expandable-content").on('click', function(){ 
    $(this).children(".internal-content").slideToggle(); 
}); 


$(".menu-button").on('click', function(){ 
    var position = $(".blue-box").css("left"); 
    if(position == "0px") { 
     $(".blue-box").velocity({left: "250px"}, 500); 
     $('.side-nav-link').finish(); 
     $('.side-nav-link').velocity('transition.slideUpIn', { stagger: 50 }); 
    } else { 
     $(".blue-box").velocity({left: "0px"}, 500); 
     $('.side-nav-link').finish(); 
     $('.side-nav-link').velocity('transition.slideDownOut', { stagger: 50 }); 
    } 
}); 

});

및 관련 HTML : 당신은 어떻게 jQuery를 엔큐 애니메이션을 만들 수 있죠

<div class="blue-box"> 
     <h1>Julian Ptak</h1> 
     <h2>Kempis Coder. Simplicity. Purity.</h2> 
     <div class="menu-button"><img class="button-icon" src="img/menu-icon.png"><p class="button-text">Menu</p></div> 
    </div> 

    <div class="red-box"> 
     <ul class="side-nav"> 
      <li class="side-nav-link"><a href="">Home</a></li> 
      <li class="side-nav-link"><a href="">Work</a></li> 
      <li class="side-nav-link"><a href="">Hobbies</a></li> 
      <li class="side-nav-link"><a href="">Writings</a></li> 
      <li class="side-nav-link"><a href="">Code</a></li> 
      <li class="side-nav-link"><a href="">Contact</a></li> 
     </ul> 
    </div> 

? 또는 오른쪽 클릭만으로 올바른 애니메이션을 재생하고 이전의 모든 애니메이션을 건너 뛰십시오.

나는 .finish() 및 .stop()을 시도했지만 둘 다 내 문제를 해결하지 못했습니다. 어떤 아이디어? velocity.js에서는 작동하지 않습니까?

Answer 1

매우 긴 질문 !!
나는 당신이 원하는 것을 얻지 못하지만, 귀하의 질문에 몇 가지 키워드에 따라 나는 몇 가지 벨로 시티 기능을 제공 할 것입니다 :
Velocity는 기본적으로 큐에 애니메이션을 추가합니다!

$elm.velocity({ /* 1 */ },{}); 
$elm.velocity({ /* 2 */ },{}); 

이 예제에서는 첫 번째 애니메이션의 끝에서 두 번째 애니메이션이 시작됩니다.

$elm.velocity({ /* 1 */ },{}); 
$elm.velocity({ /* 2 */ },{queue: false}); 

이 예제에서는 두 애니메이션이 함께 시작됩니다.

$elm.velocity('stop', true).velocity({ /* 1 */ },{}); 

이 예제에서는 velocity ('stop', true) $ elm 큐를 지우고 다음 애니메이션을 즉시 시작합니다.

Answer 2

것은 예를 들어 속도 의 지연 PARAM을 사용주의 :

jQuery(function($){ 
var $pen = jQuery('#pen'); 
    $arrow1 = jQuery('#arrow1'); 
    $arrow2 = jQuery('#arrow2'); 
    $pdf = jQuery('#pdf'); 
    $screen = jQuery('#screen'); 
$pen 
    .velocity("fadeIn", { 
    duration: 1500, 
    complete:function(elements){ 
     $arrow1.velocity("fadeIn", { duration: 1500}); 
    } 
    }); 
}); 

$pen.velocity("fadeIn", { duration: 1500 }); 
    $arrow1.velocity("fadeIn", { duration: 1500}); 
    }); 

두 애니메이션 한편의 애니메이션

종료 후 콜백 시작 동시에 시작할 수 있으므로 타임 라인이 필요한 경우 첫 번째 애니메이션이 끝난 후 시작을위한 지연을 작성하십시오.

UI를 가진 16,

$pen.velocity("fadeIn", { 
     duration: 1500 
     }); 

    $arrow1.velocity("fadeIn", { duration: 1500,delay:1500}); 
    }); 

신경 끄시는 여기 Ui pack sequence

을 좋은 설명을했지만 같은 일을 위해, 직접 여기에 우리가 간다 "fadeIn"를 사용할 수 없습니다 팩

var $pen = jQuery('#pen'); 
    $arrow1 = jQuery('#arrow1'); 
    $psd = jQuery('#psd'); 
    $arrow2 = jQuery('#arrow2'); 
    $screen = jQuery('#screen'); 

var sequenceFade = [ 
    { e: $pen, p: { opacity: 1 , display: "block"}, o:{duration :1500}}, 
    { e: $arrow1, p: { opacity: 1 , display: "block"}, o: {duration: 1500}}, 
    { e: $psd, p: { opacity: 1 , display: "block"}, o: {duration: 1500}}, 
    { e: $arrow2, p: { opacity: 1 , display: "block"}, o: {duration: 1500}}, 
    { e: $screen, p: { opacity: 1 , display: "block"}, o: {duration: 1500}} 
    ]; 



$.Velocity.RunSequence(sequenceFade);