How to use setTimeout

[KennyP]

In the following script, would you guys please show me how to properly enter a setTimeout,
or delay, in order that "#info-box" fades in 3 seconds after "#bgAudio" starts playing?

Thanks

<script>
jQuery(function($) { 

  $('#bgAudio').trigger('play').animate({volume: 1}, 6000);
		
	$('#bgAudio').on('playing', function() {
		$("#info-box").fadeIn();
		});
	$('#bgAudio').on('ended', function() {
		$("#info-box").fadeOut();
		});
	});

</script>

[Beverleyh]

Untested, but delay() should do it - more info here: http://api.jquery.com/delay/

jQuery(function($) { 

  $('#bgAudio').trigger('play').animate({volume: 1}, 6000);
		
	$('#bgAudio').on('playing', function() {
		$("#info-box").delay(3000).fadeIn();
		});
	$('#bgAudio').on('ended', function() {
		$("#info-box").fadeOut();
		});
	});

If you need more help, please provide a link to a test page.

[KennyP]

Thank you so much for taking the time to reply Beverley.
Unfortunately tho, it doesn't seem to work. I'd like to
get #info-box elements to display after everything else.

Because of additional issues this site needs work with, I
made a duplicate test site here.

[Beverleyh]

Hi,

I pulled up an old demo from an earlier thread and added the jQuery delay function: http://fofwebdesign.co.uk/template/_...n-timeline.php It works as expected here so the only thing I can think is that there is something else on your page that is causing conflicts.

My advice would be to strip the other scripts and elements back as much as you can until you (hopefully) find the conflicting obstacle.

Hope this helps

[KennyP]

Thanks again Beverley. I tried removing other scripts one at a time but no luck.
If you would show me how, I'd like to try a setTimeout for the entire info box,
sound and visual. Hopefully that might work?

[Beverleyh]

I'm on iPhone at the moment which sadly doesn't support auto-play, but I've tried to test as best I can and the timeout below appears to delay the fadein info box too in my stripped-back test page;

	$('#bgAudio').on('playing', function() {
		setTimeout(function() { $('#info-box').fadeIn(); }, 3000);
		});

To delay the audio auto-play as well, try moving the setTimeout function to the outside instead (this is the part I have no way of testing at the moment) More info on how to use setTimeout with JQuery here: http://www.sitepoint.com/settimeout-example/

[Beverleyh]

From memory, your website is now running on Wordpress?

I don't use Wordpress so can't really offer any specific help for it, but you might also want to read up on jQuery conflicts within Wordpress http://stackoverflow.com/questions/1...dpress-plugins

[KennyP]

Many thanks Beverley. Unfortunately the setTimeout doesn't work either, and you're right about Wordpress.
The way it's setup it has caused many other issues besides this one. Before going on with other site
additions/embellishments I will strip the entire site off WP. When it functions properly, I'll resume the rest of
the work on it.