Question

我正在开发一个UI模块：一个显示/隐藏的搜索表单，具体取决于用户是否悬停在目标区域上，还是仍然关注输入文本字段。我只是有另一个调整来照顾......

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

提示非常感谢。 TIA

以下是演示：

当前脚本：

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

jQuery在焦点悬停时停止动画

1 个答案: