嵌套动画结束jquery

Question

工作正常，但页面变化不一致

我认为正确的方法，但事件是触发

我正在尝试页面过渡，并使用bind()来检查css事件过渡的结束。在添加每个类之后，转换发生，并在完成时删除，这是通过触发bind()回调中的代码来知道的，但只有一个bind回调有效。因此，转换是不完整的。

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');
            $('#Container4').addClass('active');
            $('#Container4').addClass('active2');//.delay(1500).removeClass('active2');
        });
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            alert("da1");
            $(this).removeClass('active2');
        });
    }
    if ($(this).attr('class') === 'About') {
        $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');
            $('#Container3').addClass('active');
            $('#Container3').addClass('active2');//.delay(1500).removeClass('active2');
        });
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
    }
    if ($(this).attr('class') === 'Services') {
        $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');
            $('#Container2').addClass('active');
        });
        $('#Container2').addClass('active');
        $('#Container2').addClass('active2');
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
    }
    if ($(this).attr('class') === 'Home') {
        $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');
            $('#Container1').addClass('active');
        });
        $('#Container1').addClass('active');
        $('#Container1').addClass('active2');
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
        $('#Container1').toggle(effect, 'right', '10');
    }
});

想要不使用第三方插头的解决方案，请详细解释为什么会发生这种不一致

解决方案<<h2>解决演示/h2>

Answer 1

我怀疑你的代码是这样执行的:

1. 将第一个函数绑定到当前类'active1'的所有元素，并且它将绑定到调用Bind()时可用的所有元素。
2. 将第二个函数绑定到当前类'active2'的所有元素，并且它将绑定到调用Bind()时可用的所有元素。
3. bind触发第一个函数
4. 设置容器上的类现在为'active2'(此元素不在步骤2中获得的列表中)

JQuery规范说:

事件处理程序仅绑定到当前选定的元素;它们必须在你的代码调用bind()

时存在于页面上。

您不希望将第二个绑定移动到第一个函数中还是只是调用那里的功能?

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

演示

Answer 2

尝试使用JQuery传输插件from:http://ricostacruz.com/jquery.transit/

它使用CSS3动画在可用的情况下，并在几乎所有的浏览器工作。然后你可以这样做:

$('div').transit({opacity: .5, rotateX: 30, delay: 200}, 2000, function(){
   // THE ANIMATION COMPLETED    
});

或者你可以把这些动画链接起来，像

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

请不要把一半的代码放在注释里，而且都很乱。