The conclusion of jQuery's nested animation

Question

The conclusion of jQuery's nested animation

Functioning, But Page Transitions Inconsistent

What I Believe to be the Correct Approach, But Event Triggering Issue

Currently, I am experimenting with page transitions and utilizing bind() to detect the end of the CSS event transition. When a class is added, the transition occurs and is removed upon completion, which triggers the code in the bind() callback. However, only one bind callback is working, leading to incomplete transitions.

Jquery

$("a").click(function () {
    // Code to handle page transitions
});

I am seeking a solution without relying on third-party plugins, and a detailed explanation of why this inconsistency is occurring would be greatly appreciated.

SOLUTION

Demo with Solution

jquery html css css-transitions css-transforms

Answer 1

Answer №1

It seems likely that your code is running in the following sequence:

The first function is bound to all elements with the class 'active1' at the time of the bind, including those available when the bind() function is called.
The second function is bound to all elements with the class 'active2' at the time of bind(), similar to the first function.
The first function is triggered.
The class on the container is changed to 'active2', even if the element was not part of the list obtained in step 2.

According to the JQuery specifications:

Event handlers are only bound to currently selected elements, which need to exist on the page at the time of the bind() call.

Would you consider moving the second bind inside the first function or executing the functionality there instead?

function bindElement(elem, id) {

    $('.active1').on("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {

        alert("first");
        if (event.animationName === "three") {
            console.log('the event happened');
        }

        elem.removeClass('active active1');
        $(id).addClass('active');

        $(this).off("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend");
    });
}

function bindContainer(id) {

    $(id).addClass('active active2');
    $('.active2').on("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {

        alert("second");

        $(this).removeClass('active2');
        $(this).off("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend");
    });
}

$("a").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = {
        direction: $('.mySelect').val()
    };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;
    var $sel = $('div.active');
    var $class = $(this).attr('class');

    if ($class === 'Home') {

        $sel.addClass('active1');
        bindElement($sel, '#Container1');
        bindContainer('#Container1');
    }

    if ($class === 'Services') {

        $sel.addClass('active1');
        bindElement($sel, '#Container2');
        bindContainer('#Container2');
    }

    if ($class === 'About') {

        $sel.addClass('active1');
        bindElement($sel, '#Container3');
        bindContainer('#Container3');
    }

    if ($class === 'Contact') {

        $sel.addClass('active1');
        bindElement($sel, '#Container4');
        bindContainer('#Container4');
    }

});

DEMO

Answer 2

It seems likely that your code is running in the following sequence:

The first function is bound to all elements with the class 'active1' at the time of the bind, including those available when the bind() function is called.
The second function is bound to all elements with the class 'active2' at the time of bind(), similar to the first function.
The first function is triggered.
The class on the container is changed to 'active2', even if the element was not part of the list obtained in step 2.

According to the JQuery specifications:

Event handlers are only bound to currently selected elements, which need to exist on the page at the time of the bind() call.

Would you consider moving the second bind inside the first function or executing the functionality there instead?

function bindElement(elem, id) {

    $('.active1').on("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {

        alert("first");
        if (event.animationName === "three") {
            console.log('the event happened');
        }

        elem.removeClass('active active1');
        $(id).addClass('active');

        $(this).off("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend");
    });
}

function bindContainer(id) {

    $(id).addClass('active active2');
    $('.active2').on("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {

        alert("second");

        $(this).removeClass('active2');
        $(this).off("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend");
    });
}

$("a").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = {
        direction: $('.mySelect').val()
    };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;
    var $sel = $('div.active');
    var $class = $(this).attr('class');

    if ($class === 'Home') {

        $sel.addClass('active1');
        bindElement($sel, '#Container1');
        bindContainer('#Container1');
    }

    if ($class === 'Services') {

        $sel.addClass('active1');
        bindElement($sel, '#Container2');
        bindContainer('#Container2');
    }

    if ($class === 'About') {

        $sel.addClass('active1');
        bindElement($sel, '#Container3');
        bindContainer('#Container3');
    }

    if ($class === 'Contact') {

        $sel.addClass('active1');
        bindElement($sel, '#Container4');
        bindContainer('#Container4');
    }

});

DEMO

Answer 3

Answer №2

For a smooth animation experience, consider using the JQuery transit plugin found at:

This plugin utilizes CSS3 animations whenever possible and is compatible with most browsers. You can easily animate elements like this:

$('div').transit({opacity: .5, rotateX: 30, delay: 200}, 2000, function(){

   // ANIMATION FINISHED    

});

You can also chain multiple animations together like so:

$('div').transit({scale: 3.2}).transit({x: 300, y: 400}).transit({x:400, y: 500});

Remember to keep your code organized and avoid posting messy questions with incomplete code snippets.

Answer 4

For a smooth animation experience, consider using the JQuery transit plugin found at:

This plugin utilizes CSS3 animations whenever possible and is compatible with most browsers. You can easily animate elements like this:

$('div').transit({opacity: .5, rotateX: 30, delay: 200}, 2000, function(){

   // ANIMATION FINISHED    

});

You can also chain multiple animations together like so:

$('div').transit({scale: 3.2}).transit({x: 300, y: 400}).transit({x:400, y: 500});

Remember to keep your code organized and avoid posting messy questions with incomplete code snippets.

The conclusion of jQuery's nested animation

Functioning, But Page Transitions Inconsistent

What I Believe to be the Correct Approach, But Event Triggering Issue

Jquery

SOLUTION

Demo with Solution

Answer №1

Answer №2

Similar questions

Exploring MySQL: Retrieving Data Efficiently while Monitoring Server Performance

Limited functionality: MVC 5, Ajax, and Jquery script runs once

Utilizing Local Files in a Bootstrap Video Carousel

The Wordpress plugin's Ajax function is giving back a response value of zero

Tips for aligning a select and select box when the position of the select has been modified

Creating a loading screen with JQuery for an Ajax request

Updating the Origin of a Sound Element in HTML5

if this.className includes Ajax completion

Darken the backdrop of the bootstrap modal

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

A guide to retrieving a JSON Object using Python within the Flask Framework

Angular: module instantiation unsuccessful

Adjust the color of the text as it scrolls by

Sending a variable to a function within a jQuery AJAX success callback

"Enhance your website with dynamic PHP Ajax live search and infinite scrolling

The most efficient method for interacting with externally generated HTML in Rails

Discovering the trigger for a CGI script execution

Picking an item for alignment at the center with flexbox styling

Design a square confined within an adjustable rectangular container

The hover effect is failing to impact a child element during a transition