javascript - Is it possible to queue animations when using velocity.js? - Stack Overflow

admin管理员组

文章数量:1022964

I'm working on a project with a push menu. When the content div slides over, the menu buttons have a little animation as they enter the screen. It doesn't take long or anything but the issue I'm having is if the user opens and closes the menu quickly a bunch of times in a row, the items on the list begin disappearing and reappearing in the wrong order. I think this is because the new animation calls are canceling out old ones and in general screwing up the order of things.

Ideally, I'd like the animations to always behave properly (i.e. if the menu is opening, clear all previous animations and play the opening animation only).

But I'd be satisfied if I could at least get each element to queue its animations properly so that the elements in the menu don't randomly disappear upon opening the menu.

Here is a fiddle of the problem:

/

The top div is transparent because it normally has a background image. And also because I thought it might be easier to see the problem with the menu if you could see what was going on underneath the top div.

here is the relevant jQuery code:

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

});

and the relevant 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>

How do you make jQuery enqueue animations? Or only play the right animation for the right click and skipping all previous ones?

I tried .finish() and .stop() but neither seemed to fix my problem. Any ideas? Do those not work with velocity.js?

I'm working on a project with a push menu. When the content div slides over, the menu buttons have a little animation as they enter the screen. It doesn't take long or anything but the issue I'm having is if the user opens and closes the menu quickly a bunch of times in a row, the items on the list begin disappearing and reappearing in the wrong order. I think this is because the new animation calls are canceling out old ones and in general screwing up the order of things.

Ideally, I'd like the animations to always behave properly (i.e. if the menu is opening, clear all previous animations and play the opening animation only).

But I'd be satisfied if I could at least get each element to queue its animations properly so that the elements in the menu don't randomly disappear upon opening the menu.

Here is a fiddle of the problem:

http://jsfiddle/9t10zr6m/1/

The top div is transparent because it normally has a background image. And also because I thought it might be easier to see the problem with the menu if you could see what was going on underneath the top div.

here is the relevant jQuery code:

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

});

and the relevant 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>

How do you make jQuery enqueue animations? Or only play the right animation for the right click and skipping all previous ones?

I tried .finish() and .stop() but neither seemed to fix my problem. Any ideas? Do those not work with velocity.js?

• javascript
• jquery
• css
• animation
• velocity.js

Share Improve this question Follow asked Sep 16, 2014 at 19:27 Rambo8000Rambo8000 32333 gold badges1212 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Very long question!!
I don't get what you want, but according to some keywords in your question i will give you some Velocity features:
Velocity add animations to its queue by default!

$elm.velocity({ /* 1 */ },{});
$elm.velocity({ /* 2 */ },{});

in this example at the end of first animation second animation will start.

$elm.velocity({ /* 1 */ },{});
$elm.velocity({ /* 2 */ },{queue: false});

in this example both animations start together.

$elm.velocity('stop', true).velocity({ /* 1 */ },{});

in this example velocity('stop', true) clear the $elm queue then next animation immediately start.

Be careful to use the delay param for velocity for example :

  jQuery(function($){
var $pen = jQuery('#pen');
    $arrow1 = jQuery('#arrow1');
    $arrow2 = jQuery('#arrow2');
    $pdf = jQuery('#pdf');
    $screen = jQuery('#screen');
$pen
    .velocity("fadeIn", {
    duration: 1500,
    plete:function(elements){
        $arrow1.velocity("fadeIn", { duration: 1500});
    }
    });
});

The callback start after the end of the animation

in the meantime

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

the two animations start at the same time, so if you want a timeline, write a delay for start after the end of the first animation

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

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

Nevermind with the ui Pack you've a great explanation here Ui pack sequence

But for make the same thing, you can't use "fadeIn" directly here we go

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

I'm working on a project with a push menu. When the content div slides over, the menu buttons have a little animation as they enter the screen. It doesn't take long or anything but the issue I'm having is if the user opens and closes the menu quickly a bunch of times in a row, the items on the list begin disappearing and reappearing in the wrong order. I think this is because the new animation calls are canceling out old ones and in general screwing up the order of things.

Ideally, I'd like the animations to always behave properly (i.e. if the menu is opening, clear all previous animations and play the opening animation only).

But I'd be satisfied if I could at least get each element to queue its animations properly so that the elements in the menu don't randomly disappear upon opening the menu.

Here is a fiddle of the problem:

/

The top div is transparent because it normally has a background image. And also because I thought it might be easier to see the problem with the menu if you could see what was going on underneath the top div.

here is the relevant jQuery code:

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

});

and the relevant 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>

How do you make jQuery enqueue animations? Or only play the right animation for the right click and skipping all previous ones?

I tried .finish() and .stop() but neither seemed to fix my problem. Any ideas? Do those not work with velocity.js?

I'm working on a project with a push menu. When the content div slides over, the menu buttons have a little animation as they enter the screen. It doesn't take long or anything but the issue I'm having is if the user opens and closes the menu quickly a bunch of times in a row, the items on the list begin disappearing and reappearing in the wrong order. I think this is because the new animation calls are canceling out old ones and in general screwing up the order of things.

Ideally, I'd like the animations to always behave properly (i.e. if the menu is opening, clear all previous animations and play the opening animation only).

But I'd be satisfied if I could at least get each element to queue its animations properly so that the elements in the menu don't randomly disappear upon opening the menu.

Here is a fiddle of the problem:

http://jsfiddle/9t10zr6m/1/

The top div is transparent because it normally has a background image. And also because I thought it might be easier to see the problem with the menu if you could see what was going on underneath the top div.

here is the relevant jQuery code:

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

});

and the relevant 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>

How do you make jQuery enqueue animations? Or only play the right animation for the right click and skipping all previous ones?

I tried .finish() and .stop() but neither seemed to fix my problem. Any ideas? Do those not work with velocity.js?

• javascript
• jquery
• css
• animation
• velocity.js

Share Improve this question Follow asked Sep 16, 2014 at 19:27 Rambo8000Rambo8000 32333 gold badges1212 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Very long question!!
I don't get what you want, but according to some keywords in your question i will give you some Velocity features:
Velocity add animations to its queue by default!

$elm.velocity({ /* 1 */ },{});
$elm.velocity({ /* 2 */ },{});

in this example at the end of first animation second animation will start.

$elm.velocity({ /* 1 */ },{});
$elm.velocity({ /* 2 */ },{queue: false});

in this example both animations start together.

$elm.velocity('stop', true).velocity({ /* 1 */ },{});

in this example velocity('stop', true) clear the $elm queue then next animation immediately start.

Be careful to use the delay param for velocity for example :

  jQuery(function($){
var $pen = jQuery('#pen');
    $arrow1 = jQuery('#arrow1');
    $arrow2 = jQuery('#arrow2');
    $pdf = jQuery('#pdf');
    $screen = jQuery('#screen');
$pen
    .velocity("fadeIn", {
    duration: 1500,
    plete:function(elements){
        $arrow1.velocity("fadeIn", { duration: 1500});
    }
    });
});

The callback start after the end of the animation

in the meantime

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

the two animations start at the same time, so if you want a timeline, write a delay for start after the end of the first animation

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

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

Nevermind with the ui Pack you've a great explanation here Ui pack sequence

But for make the same thing, you can't use "fadeIn" directly here we go

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

本文标签： javascriptIs it possible to queue animations when using velocityjsStack Overflow