jQuery在焦点悬停时停止动画

Question

我正在开发一个 UI 模块：根据用户是否将鼠标悬停在目标区域上或仍将焦点放在输入文本字段上而显示/隐藏的搜索表单。我只是有另一个调整要照顾...

如果我碰巧将鼠标悬停在目标区域上，我希望能够取消动画（例如淡出）。目前，stop() 似乎无法完成这项工作。

非常感谢提示。 TIA

---

这是演示：

http://jsfiddle.net/s2wEu/

当前脚本：

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

Answer 1

用topbar_search_hideshow.stop(false,true).hide().fadeIn(); 替换topbar_search_hideshow.stop().animate({opacity:'100'}); 是否可以修复它，如下面的小提琴所示？ http://jsfiddle.net/7BDCB/