當鼠標輸入div時切換搜索輸入，然後隱藏鼠標輸入時的搜索輸入

Question

我在我的網站上使用搜索表單（我無法更改HTML結構，因爲它是由Wordpress生成的搜索表單）。 我有一個搜索圖標，並且我的搜索表單被隱藏。 當鼠標輸入搜索div時，我想切換我的搜索表單，搜索表單在輸入文本時保持可見，當鼠標移出div時，我希望隱藏搜索表單，使用與我的Jsfiddle中相同的動畫。

我找不到解決方案。這裏是我的HTML，我不能改變結構，因爲它是由WordPress所產生的searchform：

<div id="search"> 
<form action="http://www.mmdwc.com" id="searchform" method="get"> 
<div> 
<button type="submit" class="btn" id="searchsubmit"><i class="fa fa-search"></i></button> 
<input type="search" id="s" name="s" value="" /> 
</div> 
</form>  
</div> 

我的CSS：

body {margin-top:50px;background-color:black;text-align:right} 

#search { 
    display: inline-block; 
    border-right: 1px solid #D3D3D3; 
    margin-right: 10px; 
    vertical-align: middle; 
    padding-right: 5px; 
} 

#s { 
    border-width: medium medium 1px; 
    border-style: none none solid; 
    border-color: -moz-use-text-color -moz-use-text-color #FFF; 
    -moz-border-top-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    border-image: none; 
    background-color: #000; 
    color: #D3D3D3; 
    line-height: 12px; 
    font-style: italic; 
    margin-left: 5px; 
    margin-right: 5px; 
    display: none; 
} 

#searchsubmit { 
    background-color: transparent; 
    color: #FFF; 
    border: medium none; 
    cursor: pointer; 
    font-size: 16px; 
    margin-right: -5px; 
} 

和我的jQuery：

$("#searchsubmit").stop().one("mouseenter", function() { 
    $("#s").animate({width: 'toggle'}, 200); 
}); 

和JSfiddle在動作中看到它（帶動畫）：

http://jsfiddle.net/7hbp57my/

有人可以幫我嗎？

非常感謝您的幫助

Answer 1

你不應該單獨使用mouseenter或toggle動畫至少不會。
使用mouseenter您還必須將mouseleave事件設置爲oposite操作。

您應該附加事件處理程序的元素是整個#search div，而不是按鈕。

.stop()不需要，因爲它不執行任何動畫按鈕（你寧願停止輸入場動畫：$("#s").stop().animate(...)）。

one僅用於執行一次事件處理程序。事件被捕獲後，它立即從元素中移除，不再執行。你當然不需要這個。如果您需要event delegation，請改爲使用on。

---

// cache input element (good practice when you refer to the same object many times): 
var s_field = $("#s"); 

// hover instead of mouseenter: 
$("#search").hover(
// on mouse over: 
function() { 
    // use 'show' instead of toggle: 
    s_field.stop().animate({width: 'show'}, 200); 
}, 
// on mouse out: 
function(){ 
    // hide input field on "hover out" only when it has no focus: 
    if(!s_field.is(":focus")){ 
     s_field.stop().animate({width: 'hide'}, 200); 
    } 
}); 

Optionaly，你可以隱藏搜索元素（並清除其值）通過結合focusout事件處理程序，重點是從現場移除，：

s_field.focusout(function(){ 
    // check if mouse pointer is over the element 
    // otherwise search field will disapear before button is clicked 
    if(!$("#search").is(":hover")){ 
     s_field.val('').animate({width: 'hide'}, 200); 
    } 
}); 

JSFiddle

---

爲了更好地掌握rstand jQuery的.hover()處理器（簡寫爲等效和mouseentermouseleave）：

$(element).hover(handlerIn, handlerOut); 

其他參考：

• .is();