更新

Question

我有以下代码，只是隐藏主菜单并调出下一个预定的菜单，它完全符合我的要求，但并非总是如此，主菜单不会隐藏，所以你最终得到两个重叠的菜单＆＃39那些困扰我的人。

我为了简单起见缩短了我的代码，只显示此特定菜单的事件。

$('.tileButton').click(function() {
    $('.bottomPiece', this).animate( { bottom: "+=50px", easing: "easeInOutBack" }, 'fast', function() {
        $('#mainMenu').hide("drop", {direction: "down", easing: "easeInOutBack"}, 1000, function() { 
            $('#backButton').fadeIn(300);
        });
    });
});


$('#media').click(function() {
    $('body').animate({ backgroundPositionX: "-=1000px", backgroundPositionY: "+=1000px"  }, 1500, function() {             
        $('#videoPlayerParent').show("drop", {direction: "down", easing: "easeInOutBack"}, 750);
    });
});

由于我仍然非常环保，所以我不太确定，但我怀疑是因为我一次在同一个项目上调用了两个点击事件。但我不确定这一点，问题发生的速度是非常不可预测的，因此测试很难。有时它会连续工作20次就好了，但通常会在你最不期望的时候发生。

这是双击事件的问题还是我做错了什么？

我创建了一个jsfiddle来演示它。缺乏大多数功能，它是一个仅用于学习网络编码的个人项目。我将大部分代码添加到下面链接的jsfiddle中，并没有像它应该的那样完全显示出来。（也是Jsfiddle的新手）但我在JSFiddle中也遇到了同样的问题。

http://jsfiddle.net/9r545swy/2/

在这种情况下特别谈论媒体按钮，因为这是迄今为止我添加的唯一页面。

有时会发生什么的图像： http://i.imgur.com/r4V0JQ1.jpg

JSFiddle有点乱，所以这是一个实际的实例： http://flyingwhal.es/

（因为它根本没有优化，因此最适合使用Chrome）

Answer 1

更新

问题是可能是斯特拉发现的错误的结果，因此这不是一个答案，但希望指向正确的方向。

----------------------------------------------- -------------------------------------------------- ---------------------

问题很难理解，我认为当你在播放器动画事件完成之前非常快地按下按钮时会发生这种情况，这段代码会在动画仍在滚动时显示，并显示播放器没有出现：

$('#mainMenu').hide();
$('#videoPlayerParent').hide();

但是，由于时间原因，此代码会在您隐藏它之后出现：

$('#videoPlayerParent').show("drop", {direction: "down", easing: "easeInOutBack"}, 750);

导致页面重叠，如您所述。

您的解决方案重点是使计时器保持一致或实现某种临时禁用，就像我一样。必须有一个更优雅的解决方案，您可以在其上工作。我希望你能指出正确的方向。

我的解决方案：

加载主菜单功能变为：

var loadHomeMenu = function () {
    $('#mainMenu').hide();
    //Disable the player as soon as you want to display the front page;
    $('#videoPlayerParent').addClass('disabled').hide();

    setTimeout(function () {
        $('#mainMenu').show("drop", {
            direction: "down",
            easing: "easeInOutBack"
        }, 1000, function () {});
    },
    200);
};

媒体点击功能变为：

$('#media').click(function () {
        //Removing disabled when calling for the menu;
        $('#videoPlayerParent').removeClass('disabled');
        $('body').animate({
            backgroundPositionX: "-=1000px",
            backgroundPositionY: "+=1000px"
        }, 1500, function () {

            //Checking if the player wasn't disabled meanwhile, and if not executing the show animation;
            if (!$('#videoPlayerParent').hasClass('disabled')) {
                $('#videoPlayerParent').show("drop", {
                    direction: "down",
                    easing: "easeInOutBack"
                }, 750);
            }

        });
    });

Answer 2

感谢您的评论，感谢@Null帮助我找到确切的原因。它背后的真正原因是：我在.hover（）事件上调用.stop（）。因此，如果您在单击按钮后立即将鼠标悬停在按钮的外侧，动画显然会停止，菜单也不会隐藏。这就是为什么它以非常不可预测的速度发生，而且只是在交互过程中很难注意到的事情

~~所以我更改了我的代码，以便在动画期间添加一个类，如果存在则禁用悬停事件。当菜单弹回时，该类将被删除。~~

发现我可以在{queue: false}函数中使用.animation()。

这总是小事......但非常感谢。

事件有时不会解雇

2 个答案:

更新

----------------------------------------------- -------------------------------------------------- ---------------------

我的解决方案：