Cycle Plugin Pause after element fades out but before cycle fades next image in
Hi All,
I'm a bit new to jQuery but am loving it so far.. especially the cycle plugin. I have a strange problem that I've not been able to find the solution to anywhere else. Everything works just fine with the exception of one issue thats causing me problem.
I'm using cycle to control 3 different fading animations on my page. On 2 of the animations I'd like to pause cycle after the image fades out for a few seconds but before cycle fades the next image in. The catch is that I want the timing to be different for each pause before the next cycle begins.
The goal is for #hpcontent, #hphead, #hpfade3 to fade out all at the same time. Then for #hphead to pause for 2 seconds before it fades in the next random image, and #hpfade3 to pause for 3 seconds before it fades in the next random image
<div id="hphead" class="head1">
<img src="img/hp/message1a.png" width="319" height="79" />
<img src="img/hp/message1a2.png" width="319" height="79" />
<img src="img/hp/message1a3.png" width="319" height="79" />
</div><!--hphead-->
<script type="text/javascript" language="javascript">
setTimeout(function() {
$(".head1").fadeIn(1000);
},7000);
$('#hphead').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
random: 1,
speed: 3500,
randomizeEffects: false,
sync: false,
timeout: 19000,
});
<div id="hpfade3" class="head2">
<img src="img/hp/message2a.png" width="340" height="54" />
<img src="img/hp/message2b.png" width="340" height="54" />
<img src="img/hp/message2c.png" width="340" height="54" />
</div><!--hpfade3-->
<script type="text/javascript" language="javascript">
window.onload=(function() {
setTimeout(function() {
$(".head2").fadeIn(1000);
},8000);
$('#hpfade3').cycle({
fx: 'fade',
random: 1,
speed: 3500,
randomizeEffects: false,
sync: false,
timeout: 19000,
});
<div id="hpcontent" class="pics">
<img src="img/hp/image1.jpg" alt="1" width="989" height="600" />
<img src="img/hp/image2.jpg" alt="1" width="989" height="600" />
<img src="img/hp/image3.jpg" alt="1" width="989" height="600" />
</div>
<!--slideshow-->
<script type="text/javascript" language="javascript">
setTimeout(function() {
$(".pics").fadeIn(1000);
},6000);
$('#hpcontent').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
random: 1,
speed: 3500,
timeout: 19000
});
apologies if my code is a mess and if I'm not phrasing my question correctly. Any help would be much appreciated.