事件有时不会触发

Question

我有下面的代码，它只是隐藏主菜单并显示下一个预定菜单，它完全按照我的意愿工作，但并不总是这样，主菜单不会隐藏，所以你最终会有两个重叠的菜单，这让我很困扰。

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

$('.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来演示它。缺少大部分功能，这是一个个人项目，只是为了学习web编码。我将大部分代码添加到了下面链接的jsfiddle中，并没有完全按照预期显示。（Jsfidle也是新手）但我只是在jsfiddle中也遇到了同样的问题。

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

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

有时会发生的事情：https://i.stack.imgur.com/2ccw8.jpg

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

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

Answer 1

更新：

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

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

这个问题很难解决，我认为当你在玩家动画事件完成之前很快按下后退按钮时，就会发生这种情况，当动画仍在滚动并且玩家没有显示时，就会出现这种代码：

$('#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帮助我在这里找到确切的原因。它发生的真正原因是；我对.haverage（）事件调用.stop（）。因此，如果你在点击按钮后将鼠标悬停在按钮的外侧/内侧，动画显然会停止，菜单也不会隐藏。这就是为什么它以非常不可预测的速度发生，只是在交互过程中很难注意到的事情

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

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

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