使用velocity.js时是否可以对动画进行排队？

Question

我正在开发一个带有推送菜单的项目。当内容 div 滑过时，菜单按钮在进入屏幕时会有一点动画。不需要很长时间或其他任何事情，但我遇到的问题是，如果用户连续多次快速打开和关闭菜单，列表上的项目开始消失并以错误的顺序重新出现。我认为这是因为新的动画调用取消了旧的调用，并且总体上搞乱了事情的顺序。

理想情况下，我希望动画始终正常运行（即，如果菜单正在打开，请清除所有以前的动画并仅播放开始动画）。

但是，如果我至少可以让每个元素正确地将其动画排队，这样菜单中的元素就不会在打开菜单时随机消失，我会很满意。

这是一个问题：

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

顶部 div 是透明的，因为它通常具有背景图像。也因为我认为如果你能看到顶部 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：

<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>

如何制作 jQuery 入队动画？还是只为右键单击播放正确的动画并跳过所有以前的动画？

我尝试了 .finish() 和 .stop() 但似乎都没有解决我的问题。有任何想法吗？那些不适用于velocity.js？

Answer 1

很长的问题！！
我没有得到您想要的，但根据您问题中的一些关键字，我会给您一些 Velocity 功能：
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

小心使用速度的延迟参数 例如：

  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});
    });

两个动画同时开始，所以如果你想要一个时间轴，在第一个动画结束后写一个延迟开始

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

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

不用介意 ui Pack 你在这里有一个很好的解释 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);