Javascript jQuery在焦点悬停时停止动画

我正在开发一个UI模块：一个显示/隐藏的搜索表单，它取决于用户是否已将鼠标悬停在目标区域上，或者是否仍将焦点放在输入文本字段上。我只是有另一个调整，以照顾小康

如果我碰巧将鼠标悬停在目标区域上，我希望能够取消动画（例如淡出）。目前，stop（）似乎不起作用

非常感谢。短暂性脑缺血发作

---

下面是演示：

当前脚本：

var topbar_search_hotspot =  $('form[role="search"]');
var topbar_search_hideshow = $('form[role="search"] .row');

function fadeOutSearch() {
    var element = $('#s');
    if (!element.hasClass("focus") && !element.hasClass("hover") && element.val() == "") {
        $('form[role="search"] .row:visible').fadeOut("slow");
    }
}

topbar_search_hotspot.blur(function() {
    topbar_search_hideshow.removeClass("focus");
    setTimeout(fadeOutSearch, 1000);
}).focus(function() {
    $(this).addClass("focus");
});

topbar_search_hideshow.hide();
topbar_search_hotspot.hover(function() {
    if (topbar_search_hideshow.is(':animated')) {
        topbar_search_hideshow.stop().animate({opacity:'100'});
    } else {
        topbar_search_hideshow.fadeIn("slow");
    }
}, function(e) {
    setTimeout(fadeOutSearch, 1000);
    topbar_search_hotspot.removeClass("hover");
});

topbar_search_hotspot.hover(function() {
    $(this).addClass("hover");
    $('#s').focus();
}, function(){
    setTimeout(fadeOutSearch, 1000);
    $(this).removeClass("hover");
});

---

替换

topbar\u search\u hideshow.stop（）.animate（{opacity:'100'）使用
顶栏搜索隐藏显示.stop（false，true.hide（）.fadeIn（）修复它，如下图所示
 它似乎仍在经历衰退。您可以通过在灰色区域中来回悬停来复制该行为。