Velocity.jsアニメーションの遅延

Question

速度jsが私のコードで不思議な動きをするので少し不満です。

遅延時間を指定しなかった場合、これらのアニメーションは順番にどのように表示されますか？ Velocity Docsを読んだ後、私はこれがシミュレーションアニメーションであるべきだと考えました...しかし、これは身体アニメーション、メニューアニメーションのように発射されます。それはコード内のシーケンスでもありません。誰かが私に原因を指摘できますか？それが原因である可能性があればここで

$('#pr-nav-icon').click(function() { 
    $('#hamburger-menu-drop').velocity({marginLeft: "0px"}, { 
     duration: 300, 
     delay: 0, 
     easing: 'easeInOutQuart' 
    }); 
    $('body').velocity({marginLeft: "440px"}, { 
     duration: 300, 
     delay: 0, 
     easing: 'easeInOutQuart' 
    }); 
}); 

は、この要素のための私のSASSです：

#hamburger-menu-drop { 
    max-width: 420px; 
    background: white; 
    position: fixed; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
    top: 0px; 
    z-index: 9999; 
    background-color: $darktext; 
    overflow-y: auto; 
    box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, 0.25); 
    margin-left: -420px; 
} 

body { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    line-height: 1.55; 
    font-family: $titlefont; 
    -webkit-font-smoothing: antialiased; 
    font-weight: 300; 
    margin: 0; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-text-size-adjust: 100%; 
    color: $darktext; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    min-height: 100vh; 
    font-smooth: auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    overflow-x: hidden; 
    font-size: 1.8rem; 
    line-height: 1.25; 
} 

Answer 1

私が問題だったか考え出し、それは本当に私の愚かな間違いでした。もちろん、velocity.jsはThomasが指摘するように正常に動作していました。問題は、アニメーションが経過するように、ボディと本体にあるメニューをアニメーション化しようとしたことでした。

Answer 2

あなたの時間は、「身体」と「ハンバーガー・メニュー・ドロップをアニメーション化するための「300」であります体の長さを5秒に設定し、「ハンバーガーメニュードロップ」を.3秒に設定すると、もう一方が起こることがわかります。体の背景を黄色に変えたので、変化が視覚的に見えるようになります。

$('#pr-nav-icon').click(function() { 
 
    $('#hamburger-menu-drop').velocity({ 
 
    marginLeft: "0px" 
 
    }, { 
 
    duration: 300, 
 
    delay: 0, 
 
    easing: 'easeInOutQuart' 
 
    }); 
 
    
 
    $('body').velocity({ 
 
    backgroundColor: "#ffcc3a" 
 
    }, { 
 
    duration: 5000, 
 
    delay: 0, 
 
    easing: 'easeInOutQuart' 
 
    }); 
 
});

button { 
 
    width: 15%; 
 
} 
 
#hamburger-menu-drop { 
 
    max-width: 420px; 
 
    background: white; 
 
    position: fixed; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 9999; 
 
    background-color: $darktext; 
 
    overflow-y: auto; 
 
    box-shadow: inset -10px 0 5px -5px hsla(0, 0%, 0%, 0.25); 
 
    margin-left: -420px; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff; 
 
    line-height: 1.55; 
 
    font-family: $titlefont; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-weight: 300; 
 
    margin: 0; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-text-size-adjust: 100%; 
 
    color: $darktext; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    font-smooth: auto; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    overflow-x: hidden; 
 
    font-size: 1.8rem; 
 
    line-height: 1.25; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.2/velocity.min.js"></script> 
 

 
<button id="pr-nav-icon">CLICK ME</button> 
 
<div id="hamburger-menu-drop">HAMBURGER</div>