Javascript 事件有时不发生

我有下面的代码，它只是隐藏主菜单并显示下一个预期的菜单，它的工作方式正是我想要的，但并不总是，主菜单不隐藏，所以你最终会有两个重叠的菜单，这让我很困扰

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

$('.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次，效果很好，但通常发生在你最意想不到的时候

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

我创建了一个JSFIDLE来演示它。缺乏大部分功能，这是一个个人项目，只是为了学习网络编码。我将大部分代码添加到下面链接的JSFIDLE中，但实际上并没有像预期的那样显示出来。（对Jsfiddle来说也是新的）但是我只是在Jsfiddle中也遇到了同样的问题

在本例中，特别是谈到媒体按钮，因为这是我迄今为止添加的唯一页面

有时发生的事情的图像：

JSFIDLE有点凌乱，下面是一个实际的实例：

（在chrome上效果最好，因为它根本没有经过优化）

更新： 这个问题可能是Stella发现的bug的结果，因此这不是一个答案，但希望它指出了正确的方向

---------------------------------------------------------------------------------------------------------------------- 这个问题很难捕捉到，我认为在播放器动画事件完成之前快速按下“后退”按钮时会出现，当动画仍在滚动且播放器未显示时，此代码会命中：

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

        });
    });

媒体点击功能变为：

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

        });
    });

---

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

因此，我修改了代码，在动画期间添加了一个类，如果存在，将禁用悬停事件。当菜单弹出时，该类将被删除

发现我可以在

.animation（）

函数中使用

{queue:false}

---

总是一些小事。。但是非常感谢。

你能制作一个JSFIDLE来演示这个问题吗？为了将来的参考，你经常会被要求提供所有与javascript+html相关的问题的完整代码，因为很难猜出结构是什么样子的。正如有人所说，提供一个JSFIDLE或只是包含html。我认为

$（'.bottomPiece'，this.animate（）

应该是

$（'.bottomPiece'）。添加（this.animate（）

）。你也可以用

.animate（）

等方法传递整数

50

，而不是

“+=50px”

。安装firebug（或类似firefox中的Develper工具（感谢@Null）），看看js中是否有错误，如果有错误，浏览器可能会停止运行rest代码。@如果您不需要安装firebug来查看javascript错误，每个现代浏览器都有开发工具。请将其标记为答案，以防有人无意中发现^^接下来的两天我都不能去。我一定记得在可能的时候这样做。：）<代码>“您可以在2天内接受自己的答案”