如何在點擊按鈕上動畫搜索框？

我已經創建搜索框與搜索按鈕，但我希望搜索框只有當我點擊搜索按鈕與動畫（切換或其他...）像http://prntscr.com/tijo4，網站：http://thenextweb.com/可見。如何在點擊按鈕上動畫搜索框？

HTML：

<div id="search"> 
     <input title="Search for..." id="forsearch" type="text" class="forsearch_products"> 
     <input class="search-button" type="submit" value="Search"> 
    </div>

CSS：

#search { 
    width: 250px; 
    height: 28px; 
    background-color: #C7D7E8; 
    padding: 6px 0 6px 0px; 
} 

input#forsearch.forsearch_products { 
    width: 135px; 
    height: 18px; 
    border: 2px solid #6B9DD3; 
    margin: 0 3px 0 8px; 
    float: left; 
    padding: 3px; 
} 

input.search-button { 
    width: 85px; 
    height: 28px; 
    border: 1px solid white; 
    font-size: 12px; 
    display: block; 
    float: left; 
    font-weight: bold; 
    color: white; 
    background: rgb(237,173,113); 
}

來源

2013-02-20 Mirko Mukaetov

如果在本地JavaScript這樣做，那麼'setInterval'功能是你應該看看。如果你可以使用像jQuery/Dojo/MooTools /等庫，這個問題就變得微不足道了。 – Default 2013-02-20 21:54:46

@默認我在網站上使用jQuery，但我不是很熟悉自定義js – 2013-02-20 22:00:08

使用jQuery，這是非常簡單的。使用此代碼將在您的搜索框消失（我已經適應了最初隱藏）在搜索按鈕的點擊：

$("#search").click(function(){ 
    $("#forsearch").fadeIn(1000); 
})

Check out this fiddle看到它在行動。我也調整了搜索框的位置，將其固定在右側（如果刪除了我的樣式更改，但將搜索框保留爲最初隱藏狀態，您可以看到爲什麼。您也可以通過check out this page瞭解關於jQuery Effects的更多信息。

來源

2013-02-20 22:05:26 Default

這將提交表單之前，用戶甚至可以鍵入它。 – j08691 2013-02-20 22:14:39

謝謝，我做到了：http://jsfiddle.net/JHdzd/3/ – 2013-02-20 22:38:59

@ j08691我意識到這一點，但Mirko要求在問題中搜索框在點擊搜索按鈕後可見。有很多方法可以把它連接起來，所以表單的提交方式不同。不要認爲這是最好的想法，只是解決這個問題。 – Default 2013-02-21 00:46:48

input[type="search"] { 
    background: url("http://www.dreamtemplate.com/dreamcodes/web_icons/gray-classic-search-icon.png") no-repeat scroll 5px 50% #ffffff; 
    border-radius: 4px; 
    border: 1px solid #f1f1f1; 
    color: transparent; 
    cursor: pointer; 
    font-family: Verdana,Geneva,sans-serif; 
    font-size: 14px; 
    padding: 12px 5px 12px 22px; 
    transition: all 0.3s ease 0s; 
    width: 22px; 
}

看到演示http://cssdesk.com/Gsedv

來源

2014-06-26 10:04:06

如何在點擊按鈕上動畫搜索框？

回答

相關問題