Nested Animation end jquery

Question

Working, but with Inconsistent Page Changing What I think correct approach, but the event is triggering I'm experimenting with page transitions and using bind() to check for end of css event transition. After each class is added transition takes place and removed on completion, which is known by triggering of code in bind() call back, but only one bind call back works. So, the transition is incomplete. Jquery ``` $("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'); if ($(this).attr('class') === 'Contact') { $sel.addClass('active1'); var $element = $('.active1').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) { if (event.animationName === "three") { console.log('the event happened'); } $sel.removeClass('active'); $sel.removeClass('active1')…

Accepted Answer

I suspect that your code executes like this:

- Bind first function to all elements where there is a currently class 'active1' and it will bind to all element that are available at the time bind() is called.

- Bind second function to all elements where there is a currently class 'active2' and it will bind to all element that are available at the time bind() is called.

- The bind fires first function

- Sets the class on the container to now be 'active2' (this element was not in the list obtained at step 2)

JQuery spec says:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to bind()

Do you not want to move the second bind inside the first function or just evoke 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

Nested Animation end jquery

Solution

Problem