javascript - CSS过渡播放了太多次；通过jQuery添加

所以我有2个div，其中之一是使用jQuery .hide（）在加载时隐藏的

一个div是id是菜单，另一个是prix-fix-menu

我想通过单击按钮淡出并在2之间滑动。它是餐厅菜单，因此我想平滑滚动至菜单的不同部分（例如应用程序，主菜，甜点等），但是如果用户单击“ Prix Fix”按钮，则该页面将褪色并滑出常规菜单然后淡入淡出并在Prix Fix菜单中滑动。如果他们打开了Prix Fix菜单，我希望除Prix Fix链接以外的任何链接都可以将用户带回到主菜单页面，滑出Prix Fix并在常规菜单中滑动。

为此，我只是动态地从Animate.css中添加和删除类。问题是动画会继续播放不止一次（即使Im使用.one（）方法）。我相信可能是因为我正在听animationend事件然后播放另一个动画导致循环。但是奇怪的是，它只播放了4次，而不是无限次。

这是JavaScript：

$('#prix-fix-menu, #catering-menu').hide();
    $("a[href='#prix-fix']").on('click', function () {
        $('#menus').removeClass().addClass('animated fadeOutLeft');
        $('#menus').one('animationend webkitAnimationEnd', function () {
            $("#menus").hide();
            $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
        });
    });


    $("a:not(a[href='#prix-fix'])").on('click', function () {
        $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
        $('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
            $("#prix-fix-menu").hide();
            $('#menus').show().removeClass().addClass('animated fadeInLeft');
        });
    });

我也有一个平滑的滚动脚本（位于标记底部的上一个脚本之后），也与锚链接一起工作。将其放在此处以防万一，这是导致问题的原因，即使我不这样认为：

$('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
            }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

如果需要CSS或HTML之类的更多信息，请告诉我，我会加急，但是由于所有项目，菜单上有很多标记。

链接到实时项目：Project

提前致谢！

最佳答案

遵循此CODE1

CODE1

$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
    //add this line
    $('#prix-fix-menu').unbind('animationend webkitAnimationEnd');

    $('#menus').removeClass().addClass('animated fadeOutLeft');
    $('#menus').one('animationend webkitAnimationEnd', function () {
        $("#menus").hide();
        $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
    });
});

$("a:not(a[href='#prix-fix'])").on('click', function () {
    //add this line
    $('#menus').unbind('animationend webkitAnimationEnd');

    $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
    $('#prix-fix-menu').one('animationend webkitAnimationEnd', function () {
        $("#prix-fix-menu").hide();
        $('#menus').show().removeClass().addClass('animated fadeInLeft');
    });
});

您的代码可能会导致animationend webkitAnimationEnd多次绑定，因此animationend webkitAnimationEnd在开始动画之前取消绑定。

为什么

问题是animationend webkitAnimationEnd。 animationend和webkitAnimationEnd是不同的事件。

对于您的情况，您尝试同时添加两个事件。因此触发动画结束后会剩下另一个事件。您可以轻松了解这种情况。尝试遵循CODE2。

CODE2

$('#prix-fix-menu, #catering-menu').hide();
$("a[href='#prix-fix']").on('click', function () {
    $('#menus').removeClass().addClass('animated fadeOutLeft');
    $('#menus').one('webkitAnimationEnd', function () {
        $("#menus").hide();
        $('#prix-fix-menu').show().removeClass().addClass('animated fadeInRight');
    });
});

$("a:not(a[href='#prix-fix'])").on('click', function () {
    $('#prix-fix-menu').removeClass().addClass('animated fadeOutRight');
    $('#prix-fix-menu').one('webkitAnimationEnd', function () {
        $("#prix-fix-menu").hide();
        $('#menus').show().removeClass().addClass('animated fadeInLeft');
    });
});

在CODE2中，仅删除animationend事件。看来工作正常。但是当您反复单击相同的按钮时仍然存在问题。要使用CODE2，您必须过滤以供用户使用if-statement重复单击同一按钮。