Question

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!

<script>
function changeborder()
{
search.style.border = '1px solid #4F94CD';
}
</script>
<div align='center'>
<div id='top'>
<div style="width:982px;">
<div id="floatleft"><a href="http://www.pearlsquirrel.com"><img        src="pearlsquirrel.jpg"/></a></div>
    <div id="floatleftsearch">
    <div style="margin-top:14px; height:36px;"><form    action='searchmusic.php' method='GET'  autocomplete="off"><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()'/>

Answer 1

If you don’t care about the fade not working in IE (the color would just instantly change instead of fade), you can ditch the javascript entirely and use CSS transitions:

#search {
   -moz-transition: all 1s linear;
   -webkit-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}

#search:focus {
   border: 1px solid #4F94CD;
}