CODEWITHSUNDEEP
javascriptjquerydomanimation
Mirko Mukaetov
Mirko Mukaetov

Reputation: 204

How to animate search box on button click?

I've create search box with search button, but i want the search box to be visible only when i click on search button with animation (toggle or something...) like http://prntscr.com/tijo4 , website: http://thenextweb.com/.

I have tried only this : 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); 
}

Upvotes: 0

Views: 5340

Answers (2)

john smith
john smith

Reputation: 1

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

see the demo http://cssdesk.com/Gsedv

Upvotes: 0

Default
Default

Reputation: 16498

With jQuery, this is very simple. Using this code will fade in your search box (which I have adjusted to be initially hidden) upon the click of your search button:

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

Check out this fiddle to see it in action. I have also adjusted your search box's position to be fixed to the right (you can see why if you remove my style changes, but leave the search box as hidden initially). You can also check out this page to learn more about jQuery Effects.

Upvotes: 1

Related Questions