javascript - How to animate search box on button click? -

javascript - How to animate search box on button click? -

i've create search box search button, want search box visible when click on search button animation (toggle or something...) http://prntscr.com/tijo4 , website: http://thenextweb.com/.

i have tried : http://jsfiddle.net/jhdzd

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); }

with jquery, simple. using code fade in search box (which have adjusted hidden) upon click of search button:

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

check out fiddle see in action. have adjusted search box's position fixed right (you can see why if remove style changes, leave search box hidden initially). can check out page larn more jquery effects.

javascript jquery dom animation