0

我正在开发一个带有推送菜单的项目。当内容 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 吗？

4

2 回答 2

3

很长的问题！！
我没有得到您想要的，但是根据您问题中的一些关键字，我会给您一些 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 队列，然后下一个动画立即开始。

于 2014-09-19T20:55:38.620 回答
1

小心使用延迟参数来表示速度，例如：

  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);
于 2015-04-28T13:02:31.213 回答