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 */ },{});

在此示例中，速度（'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);

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

2 个答案: