ike ike - 5 months ago 16
CSS Question

Slideshow transition in javascript

I cant seem to get this slide show to work with javascript. the image fades in and out correctly on the first image but when transitioning for the second image it seems to immediately skip to the image instead of transition like the previous.

<script type="text/javascript">
var images = ["image1.png", "image2.png", "image3.jpg"];
var imagecount = 0;
window.setInterval(setImage,5000);
function setImage(){
$('.bgimage').fadeIn(5000);
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeOut(5000);
imagecount++;
if(imagecount > 2){
imagecount=0;
}
}
</script>

Answer

Without seeing the html structure or a fiddle, it's hard to trouble-shoot with any accuracy. I'm guessing the issue is probably with your fadeIn and fadeOut calls, as they are currently set to animate for a full 5 seconds each, and animating at the same time as one another (They are called asynchronously). Instead, you should adjust the fadeIn method to execute after the fadeOut finishes using the built-in jQuery callback. Like so:

$('.bgimage').fadeOut(500, function() {
  $('.bgimage').css('background-image','url('+images[imagecount]+')');
  $('.bgimage').fadeIn(500);
});

I've also switched the order of your fade calls, as you should fade out the image, then update it (while it's not visible), then fade it back in. Your interval should still work the way you want, running every 5 seconds. Now the transitions won't take a full 5 seconds to animate.