I need to implement a simple .fadeIn with javascript

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!

score 4 · Accepted Answer · edited May 23 '17 at 12:27

4

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

edited May 23 '17 at 12:27

Community

1
1

answered Dec 04 '11 at 16:30

Adam Rackis

82,527
56
270
393

Well, as I said above I lack knowledge with both of these functions. I tagged jQuery because I thought that it might be possible to do with either. I will use anything that will solve the problem, sorry for the lack of explanation. – Eggo Dec 04 '11 at 16:31
Sorry, this might sound like a stupid question, but If I use that, where do I say that search.style.border = '1px solid #4F94CD'; – Eggo Dec 04 '11 at 16:33
oh, thank you so much dude I really appreciate it more than you know! – Eggo Dec 04 '11 at 16:34
@Eggo (love the user name) - on your second question, if you want to do that when the fadeIn is complete, you would pass it to the callback, like my edited code shows. And you're welcome, my pleasure! – Adam Rackis Dec 04 '11 at 16:42
Thanks! Well I thought that I had this, but I am stuck again. After I set the function changeborder(), how do I call the jquery and not the chnageborder function. – Eggo Dec 04 '11 at 17:06
function changeborder() { search.style.border = '1px solid #4F94CD'; } $("#search").fadeIn(2000, function() { changeborder(); }); This is what I have so far, but I do not know if it is right. And I am sorry if my naivete is making you a slight bit mad, but I am a php guy. – Eggo Dec 04 '11 at 17:07
Umm, not sure I understand, but, you'll want to call the $(..).fadeIn in your document.ready function. Just google how to do that - it'll look ugly in the comments, and I'm on my phone now, so editing my question will be a pain :) – Adam Rackis Dec 04 '11 at 17:18
Calling $(..).fadeIn won't work in a script in your head since the Dom isn't ready. – Adam Rackis Dec 04 '11 at 17:19
All I am trying to do is get the border, 1px solid #4F94CD to fade in over the course of 1 second after the search bar, with id='search' has been clicked. – Eggo Dec 04 '11 at 17:20
And I really have no idea what I am doing, even when looking at your code. – Eggo Dec 04 '11 at 17:21
@Eggo - Oh - you want the *border* to fade in. I'm sorry, I don't know how to do that. I would write a new question, and ask simply how do I fade in a div's border using jQuery. And of course include the HTML of the div, and the style of the border you want: 1px solid blue or whatever. I'm sure someone can help you – Adam Rackis Dec 04 '11 at 17:35
Ok, thank you so much for the help man, I really do appreciate it. – Eggo Dec 04 '11 at 17:42

Shyju · Answer 2 · 2011-12-04T16:37:16.880

0

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

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

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

edited Dec 04 '11 at 16:37

answered Dec 04 '11 at 16:32

Shyju

214,206
104
411
497

score 0 · Answer 3 · answered Dec 04 '11 at 16:32

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).

score 0 · Answer 4 · answered Dec 04 '11 at 16:33

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

I need to implement a simple .fadeIn with javascript

4 Answers4