jQuery cross fading two images on a loop!
Solution 1
Edit 2+ years later: There are better ways to do this... so ignore this answer.
I would try a combination of callbacks and setTimeout. (I'm going to build on Kobi's response, since he posted while I was typing.)
In CSS, give both images a "display: none;" instead of setting them to hidden at the beginning in jQuery. Then in jQuery:
function imageOneFade(){
$('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); });
}
function imageTwoFade(){
$('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); });
}
$(document).ready(function(){
imageOneFade();
});
Hopefully something like that you work.
The setTimeout function takes two parameters.
setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)
And the fadeIn/Out functions can have a second parameter that will trigger when the effect is finished.
Solution 2
Here's a four image looping slideshow that does not use the setTimeout function, but instead uses the delay function.
<script>
function startSlideshow(){
$("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000
$("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000
$("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000
$("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000
}
$(document).ready(function(){
startSlideshow();
});
</script>
see it in action http://www.erestaurantwebsites.com/
Solution 3
Why don't you use a solution already made like the Cycle plugin?
It has a lot more of options than you want to do.
If you really need to do this by yourself you could watch at the source code of the plugin. I didn't do that, but I think the coder uses a combination of the animate function (from jQuery) and the setTimeout function (from purely javascript). Using those functions he must do something like to enable a timer for an amount of time, and when time's complete he execute the animate function setting the opacity of the image to 0 (for the image hidding) and 1 (for the image showing).
Solution 4
You can use a combination of jQuery's callbacks and JavaScript setTimeout
.
setTimeout is used for delays, and callbacks are used after animations complete (there are many other callbacks though).
function startSlideshow(){
$('#p1').fadeOut(2000, function(){
setTimeout(function(){
$('#p1').fadeIn(2000, startSlideshow)
},1000);
});
}
$(document).ready(function(){
startSlideshow();
});
See it in action: http://jsbin.com/ulugo
Cool Hand Luke
Updated on June 09, 2022Comments
-
Cool Hand Luke almost 2 years
I am having trouble working out how to get a simple fade in fade out loop to work. I am pretty new to jQuery as you can maybe tell. I have had a go at it but now it’s taking too long to work out so I thought I would ask for some help.
What I want to do:
I have two Images, id's #img1 and #img2. I want image 1 to fadeIn then wait for lets say 6 seconds then fade out. I have tried the .wait function but it just stopped the little I had from working. I managed to get the first image to fade in and then out but with no wait in between. I then want to start fading image 2 in while image 1 is fading out then Image 2 to wait then fade out while image 1 fades in again and loop forever! Hope that makes sense.
$(document).ready(function(){ $('#img1').hide() .load(function () { $(this).fadeIn(4500) .fadeOut(4500); $('#img2').hide().wait(9000) .load(function () { $(this).fadeIn(4500) .fadeOut(4500); });
Cheers, its driving me crazy. Ps can you try and give a little explanation to what is going on in you answer. Thanks
-
Cool Hand Luke over 14 yearsBecause I have to been asked to do this by a would be employeer and I need to stick with the way they have asked me to do it. This is the last task I have to do and I need a hand with it, having no experiance in jQuery. Thank you for the pointer though.
-
David O'Sullivan about 12 yearsI seem to run into 'stack' issues with this- cross browser, in ie for example I get this 'Out of stack space' after a few loops, some browsers last longer than others before this error comes up. Not sure what to do about it...
-
Mohammad Saberi over 11 yearsKobi what should we do if we have 2 images (items) in your code ?