当我快速鼠标移动时，jQuery 悬停会卡住

Question

我有一个写着“订阅”的按钮，当用户将鼠标悬停在它上面时，我想用另一个写着“取消订阅”的按钮替换它。

(有点像 Twitter 的“关注”按钮，如果您将鼠标悬停，该按钮就会变成“取消关注”。)

这是我到目前为止所得到的。

$(document).ready(function(){
    $('#subscribed_button').hover(function(){
        $('#subscribed_button').css("display","none");
        $('#unsubscribe_button').css("display","inline");
    },function(){
    });
    $('#unsubscribe_button').hover(function(){
    },function(){
        $('#unsubscribe_button').css("display","none");
        $('#subscribed_button').css("display","inline");
    });
});

一切都很好，除了当我快速移动鼠标时，在这种情况下，似乎检测到“悬停打开”，但没有检测到“悬停关闭”。所以我的按钮偶尔会卡在“取消订阅”中......这很奇怪并且在视觉上分散注意力。

我在 Stackoverflow 上看到的大多数解决方案都与停止动画有关，但在本例中，我没有为任何内容设置动画；这是一个简单的显示开/关。

有什么想法吗？

Answer 1

如果没有看到它的实际效果，我假设这是因为您显示/隐藏了 2 个不同的 html 元素。当您快速将鼠标移出并移出时，非事件元素可能尚未变为事件状态，等等，从而导致问题。

为了获得更好的稳定性和性能，我建议采用以下方法:

仅使用单个 html 元素进行订阅/取消订阅，而不是显示/隐藏 2 个元素，只需更改按钮的文本和/或通过更改 css 类等换出背景图像。更好如果使用图像背景，则使用包含两种状态的单个背景图像，并根据当前状态更新背景位置。

以上只是一个概念，因为您尚未发布完整的代码，因此不可能对其进行修改。