Fading an input border onclick
<p>I need some help with what I think is some simple javascript/jquery.  I really don't care which one is used, but here is what I am trying to get to happen.  When someone clicks on the search bar, with id='search', I want the border search.style.border = '1px solid #4F94CD'; to fade in around the search bar over the course of a second or so.  Thanks for the help!</p>

<pre><code>&lt;script&gt;
function changeborder()
{
search.style.border = '1px solid #4F94CD';
}
&lt;/script&gt;
&lt;div align='center'&gt;
&lt;div id='top'&gt;
&lt;div style="width:982px;"&gt;
&lt;div id="floatleft"&gt;&lt;a href="http://www.pearlsquirrel.com"&gt;&lt;img        src="pearlsquirrel.jpg"/&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div id="floatleftsearch"&gt;
    &lt;div style="margin-top:14px; height:36px;"&gt;&lt;form    action='searchmusic.php' method='GET'  autocomplete="off"&gt;&lt;input type='text' name='search'    id='search' class='search' value="Search..." onClick="changeborder();    searchresults.style.visibility = 'visible';"   onfocus="if(this.value==this.defaultValue)this.value='';"   onblur="if(this.value=='')this.value=this.defaultValue; this.style.border = '1px solid   #5E5E5E'; hidediv();" onkeyup='searchmusic()'/&gt;
</code></pre>
