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

Question

我正在做一个带有推送菜单的元素。当内容 div 滑过时，菜单按钮在进入屏幕时会有一点动画。它不会花费很长时间，但我遇到的问题是，如果用户连续多次快速打开和关闭菜单，列表中的元素开始消失并以错误的顺序重新出现。我认为这是因为新的动画调用抵消了旧的动画调用，通常会打乱事物的顺序。

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

但如果我至少能让每个元素正确地排列其动画，这样菜单中的元素不会在打开菜单时随机消失，我就会感到满意。

这是问题的一个 fiddle :

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 队列，然后下一个动画立即开始。