I'm very new to Jquery so please forgive, if this is trivial. I have a webpage with four automatic slideshows on it. I need to pause the fade in function of the next slide by 20 seconds for each slideshow.
Also, Jquery shows each img upon loading the page. Is there a way to prevent MySlides1-3 from being visible until their fade in? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Eventus Energy</title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"/> <script type="text/javascript" src="jquery-1.3.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#myslides').cycle({ fx: 'fade', speed: 2000, timeout: 4000, autostop: 4, }); }); $(document).ready(function(){ $('#myslides1').cycle({ fx: 'fade', speed: 2000, timeout: 4000, autostop: 4, delay: 12000 }); }); $(document).ready(function(){ $('#myslides2').cycle({ fx: 'fade', speed: 2000, timeout: 4000, autostop: 4, delay:18000 }); }); $(document).ready(function(){ $('#myslides3').cycle({ fx: 'fade', speed: 2000, timeout: 4000, autostop: 4, delay: 4000 }); }); </script> </head>