Search jQuery

jQuery Forum

Swapping image with fade out/fade in

in Using jQuery • 11 years ago

Hi i have this script that fades out an image then it fades it in with a new image but sometimes the time gets lag or it desynchronizes when the window lost focus, the same happens with setInterval and setTimeout

What i'm missing or how should i do it?

$(document).ready(function(){
$("#imgb").attr('src','img/changing/baseBackground.png');
var lastImage = "";
var ni=1;

function loadTopImage(){
      var topImages =              ["baseBackground.png","baseBackground2.png","baseBackground3.png","baseBackground4.png","baseBackground5.png","baseBackground6.png"];
      var img = topImages[ni];

$("#imgb").animate(
      {
            opacity:0},1000,function(){
                                                     $("#imgb").attr('src','img/changing/'+img).animate({opacity:1},1000);
            });

      lastImage = img;
      ni++;
      if(ni>topImages.length-1){
ni=0;
      }
      intervalTrigger()
      }

function intervalTrigger(){
setTimeout(loadTopImage,6000);
}

intervalTrigger();

});

Thank you.

Response title

Attachments

jQuery Forum

Swapping image with fade out/fade in

Statistics

Tags

Actions