0

我正在开发一个 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");
});
4

1 回答 1

0

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

于 2013-04-06T18:22:42.873 回答