Can animations be stacked in a queue while using velocity.js?

I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items on the list start disappearing and reappearing in an incorrect order. This issue seems to be caused by new animation calls overriding old ones and disrupting the sequence of events.

My ideal scenario would be for the animations to always function correctly (i.e., when the menu is opening, clear all previous animations and play the opening animation exclusively).

If that's not feasible, I'd settle for ensuring that each element queues its animations appropriately so that the menu elements don't vanish randomly upon opening the menu.

Check out this fiddle demonstrating the problem:

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

The top div is transparent due to having a background image, and I felt it would aid in visualizing the menu issue if you could see what was happening under the top div.

Here is the applicable 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 here is the pertinent 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 can one make jQuery queue animations? Or ensure that only the correct animation plays based on the click, ignoring all previous ones?

I attempted using .finish() and .stop(), but neither resolved my issue. Any suggestions? Do those methods not work with velocity.js?

javascriptjquerycssanimationvelocity.js

Answer №1

Here is a detailed explanation of Velocity features:
Velocity automatically adds animations to its queue by default!

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

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

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

In this example, both animations start simultaneously.

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

In this example, velocity('stop', true) clears the $elm queue, allowing the next animation to start immediately.

Answer №2

Make sure to utilize the delay parameter for velocity animations like this:


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

The callback function will start after the animation ends.

In contrast, if you don't specify a delay:


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

Both animations will start simultaneously. To create a timeline effect, add a delay for the second animation to start after the first one ends:


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

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

If you need more help, check out the UI Pack with detailed explanations here.

To achieve the same result, avoid using "fadeIn" directly and follow this structure:


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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: Navigating through submenu items

I have a question about how to route submenu elements in Angular 2. The structure of my project is as follows: -app ---login ---registration ---mainApp (this is the main part of the app, with a static menu and links) -----subMenu1 (link to some con ...

javascriptangularroutes

enhancing angular directives with data binding while replacing HTML content inside the compile function

I am currently attempting to develop a directive that will substitute an input field with a custom-made input field. Unfortunately, I am encountering challenges with getting the data binding to function properly, as the model does not display in the direct ...

javascriptangularjsdata-bindingdirective

The information being sent from Angular is not being successfully transmitted to the XAM

Here is my Angular service post method: getUserDetails(username , password) { alert(password); return this.http.post<myData>("http://localhost/test/api/auth.php", { username, password }); } This is the structure of my PHP file: <?php ...

javascriptangular

JQuery Label Click Problem with Selecting All Check Boxes

I'm attempting to create a SELECT ALL checkbox that can be clicked on the label itself. Currently, only alert statements are triggered when clicking the label. On the right side under Asset Types, there is a checkbox that, when checked, selects all o ...

jqueryhtmlxmlhyperlinkanchor

NodeJS MySQL failing to retrieve the most updated data post-write

I'm struggling to solve an issue where after performing data operations (create, update, delete) and then querying for the data afterwards, I receive the previous version of the data rather than the updated version. For example: Let's say I hav ...

javascriptmysqlnode.jsdatabaseexpress

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source ...

javascriptvue.jsnuxt.js

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

javascriptcssreactjsuse-state

Unleashing the Power of Vuejs: Setting Values for Select Options

I have a specific requirement in my Vue application where I need to extract values from an XLS file and assign them to options within a select dropdown. Here is what I currently have: <tr v-for="header in fileHeaders" :key="header"&g ...

javascriptvue.js

Endless scrolling feature malfunctioning

On my profile_page.php, the default setting is to display 10 posts (10 rows from the database) for the user. If a user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to reveal the remaining posts (maximum of 10). For e ...

javascriptphpjqueryhtmlajax

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Lately, I've been facing challenges with updating my Node.js version, and one method I tried was using node version manager. After downloading the install_nvm.sh file with the command curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/insta ...

javascriptnode.jsnpmnode-modulesnvm

Redirect the Submit button to the specified URL from the form element

Looking for a way to create a form with two fields: Username and Password. Upon clicking submit, the username and password should be added to the URL in a specific format. For instance: The URL structure will remain the same, only the "username_entered_i ...

javascriptphpjqueryhtml

Mastering the art of debugging a mongoose action in node.js

I am utilizing mongoose for connecting my node.js app with mongoDB. However, I am facing an issue where the database does not get updated when I create or update a model instance. How can I effectively debug and identify what goes wrong in the create or up ...

javascriptnode.jsmongodbdebuggingmongoose

Issue with fullPage.js - Unable to scroll to footer on the last section of the page

I'm currently working with the fullPage.js plugin () and encountering some issues. While sliding through each section, everything functions as expected. However, when I reach the last section and try to scroll down to the footer below it, I encounter ...

javascriptjqueryhtmlcssfullpage.js

Creating the correct JSON structureHere is how you can format JSON

I have a snippet of javascript code that I'm utilizing with casperjs to iterate through links and retrieve data in json format. Below is the code snippet: casper.each(links, function (self, link) { this.thenOpen(link, function () { // obtain w ...

javascriptjsoncasperjs

Trying out the fetch api with Jest in a React Component: A step-by-step guide

As a newcomer to test driven development, I stumbled upon a section that talked about testing/mocking a fetch API. However, I am facing issues while trying to write my own test. In order to practice this concept, I created a simple weather app where I atte ...

javascriptreactjsunit-testingtestingjestjs

Mapping objects in an array with Javascript

This code snippet is intended for a React Native Chat app. The structure of my data should look something like this: const chatData = [ { id: 1, name: 'John Doe', messages: [ {text: 'Hello', sentAt: 'time here' ...

javascriptreactjsreact-native

Whenever I make a move in the Towers of Hanoi javascript game, I always ensure that both towers are updated simultaneously

As I explore the Towers of Hanoi puzzle using JavaScript constructors and prototypes, I encounter issues with my current implementation. Whenever I move a disc from one tower to another, an unintended duplicate appears in a different tower. Additionally, a ...

javascriptconstructortowers-of-hanoi

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

Issue with extended waiting times in polling

I am currently working on a chatroom using the long poll method. However, I'm facing an issue where every time a long poll occurs and I refresh the page in Chrome or try to send another async request, everything times out. This means I can't load ...

phpjavascriptajaxcomet

Tips on creating a unique d3js tree design

I am a beginner when it comes to d3js and javascript in general. My goal is to create an interactive IP administration overview using d3js by modeling json data. I know that the key tool for this job is likely d3.layout.tree, which will provide me with the ...

javascriptjsond3.js