CODEWITHSUNDEEP
javascriptjquery
Eggo
Eggo

Reputation: 539

I need to implement a simple .fadeIn with javascript

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!

Upvotes: 0

Views: 115

Answers (4)

Adam Rackis
Adam Rackis

Reputation: 83358

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

Upvotes: 4

Shyju
Shyju

Reputation: 218722

Have a look at http://api.jquery.com/fadeIn/

   Ex : $("#yourDivId").fadeIn(500)

Here is a sample http://jsfiddle.net/rXJD4/

Upvotes: 0

KeatsKelleher
KeatsKelleher

Reputation: 10191

Alternatively you can do something like this:

var el = document.getElementById( "searchresults" );
el.style.opacity = 0;
el.style.visibility = "visible";
for( var i = 0; i < 100; i++ )
{
  setTimeout( function( ){
    el.style.opacity = 0.01 * i;
  }, 200 + i );
}

Upvotes: 0

jfriend00
jfriend00

Reputation: 707158

setTimeout takes a function like this, so your code would work with this:

setTimeout(function() {searchresults.style.visibility = 'hidden'}, 200);

Or, if you want to do an actual fade with javascript and you can use jQuery (which you've tagged the question with and the object has id="searchresults", you can use this jQuery:

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

This will delay for 200 milliseconds (like your setTimeout statement and then fadeIn over a 500 milliseconds duration).

Upvotes: 0

Related Questions