0

私はUIモジュールに取り組んでいます.ユーザーがターゲット領域にカーソルを合わせたか、入力テキストフィールドにまだフォーカスがあるかによって表示/非表示を切り替える検索フォームです。もう 1 つ微調整する必要があります...

ターゲット領域にカーソルを合わせた場合、アニメーション (フェードアウトなど) をキャンセルできるようにしたいと考えています。現時点では、stop() は機能していないようです。

ヒントは大歓迎です。ティア

デモは次のとおりです。

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 に答える