Question

I am trying to implement, what I think would be a fairly simple fadeIn using javascript, but I just can not get it to work.

Here is the code:

<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()'/>

My goal is the get this piece to fadeIn

function changeborder()
{
search.style.border = '1px solid #4F94CD';
}

However, I have tried all that I know, which is not much about javascript, and can not figure this out. I think that this is fairly simple to do, but I need any help that I can get. Thanks!

Answer 1

Since you’ve tagged with jQuery, why not just use the jQuery fadeIn function?

$("#searchresults").fadeIn(200);

Note that if you want to be notified when the fade in is complete, you can pass a callback

$("#searchresults").fadeIn(200, function() { changeborder(); });

Also, a few words on your original code.

setTimeout("searchresults.style.visibility = 'hidden'", 200);

will simply wait 200ms, and then hide your element named searchresults. To actually fade it, you’ll want to use the fadeIn function above.

And in the future, instead of code like

setTimeout("searchresults.style.visibility = 'hidden'", 200);

which passes the JavaScript to be run after the timeout as a string, you’ll really want to pass a function. And instead of referring, to your dom elements by id in your script, you’ll want to pull them down using document.getElementById

setTimeout(function() { 
   var el = document.getElementById("searchresults");
   el.style.visibility = 'hidden';
}, 200);

For a brief explanation of why passing a string to setTimeout is bad, have a look here. The short version is that the string is run in the global scope in a similar way to eval