I'm new to javascript so I'm struggling with the basics...

I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)

function show() {

AB = document.getElementById('div_with_text');

AB.style.display = 'inline';
}

setTimeout("show()", 3000);

Can any one help with this?

I've tried adding things like:

$(function(){  
  $('#div_with_text').fadeIn('slow');  
}); 

but I don't know the language well enough to get it to work...

Any help would be much appreciated!

I'm new to javascript so I'm struggling with the basics...

I'm using this delay to bring in a div but i want to fade the div in as part of this function (not just have the box appear)

function show() {

AB = document.getElementById('div_with_text');

AB.style.display = 'inline';
}

setTimeout("show()", 3000);

Can any one help with this?

I've tried adding things like:

$(function(){  
  $('#div_with_text').fadeIn('slow');  
}); 

but I don't know the language well enough to get it to work...

Any help would be much appreciated!

• javascript
• html
• time
• delay
• fade

• what exactly is your problem? – Praveen Lobo Commented Jul 20, 2012 at 20:21
• Hey Lobo, I have a text box that appears on my home page after the delay script above - this work fine but I would prefer the box to fade in. So I'm asking what do i need to add to the delay code to fade the box in after the delay? hope that makes sense... – Jayp07 Commented Jul 20, 2012 at 20:51

2 Answers 2

Is your DIV hidden in the first place? If not, that is your problem. Your are trying to open an already opened door.

Your code is also incorrect, even if you hide the DIV, this will not work. It should have been setTimeout(show, 3000);

With the JavaScript code (setTimeout) you have provided, 3 seconds after the page loads, you are trying to display the DIV. Did you notice that the DIV was already there and never 'appeared' after 3 seconds as you expected?

Example - http://jsfiddle/BLPTq/2/ - just click run and see.

To make it work, hide the DIV first and then call the setTimeout or the jQuery method. Example - http://jsfiddle/zeXyG/ - just click run and see. Check the CSS display:none;

OR, if you don't want to hide it with CSS, just call hide() before calling fadeIn()

$('#div_with_text').hide().fadeIn('slow');

Example - http://jsfiddle/zeXyG/1/

As per your ment below. Add delay() to the call like shown below

$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');

2 seconds after the page loads, this will hide the div and then fade in slowly. Look at this example carefully.

The fadeIn method will only work if you load the jQuery library on your page. Without that, the method will not work since it isn't part of native Javascript.

Once you have loaded jQuery, that method will work as your syntax is correct.