javascript animation error

[barrerr122]

im getting a very strange error.

var img=1;
var source1;
var source2;
var called=0;
var x=1;

var img=1;
var imgUrl;
var imgCount =5;


$(window).load(function(){
document.getElementById("imgm").src="Images/test1.jpg"; // setup first image on pageload
	setup();

});

function setup() {
if(img>imgCount){ // if img is greater than the value of imgCount set to 1
img=1;
}else{
img++;//add 1 to the current numeric value
}
imgUrl="Images/test"+img+".jpg";//set imgUrl based on current img numeric value
anim();

}


function anim(){
$("#imgm").fadeOut(3000,function(){});
//fade out element with an id of "imgm"
document.getElementById("imgm").src=imgUrl;
$("#imgm").fadeIn(3000,function(){});
//alert here
//once fadeout has completed, change src attribute of "imgm" to value of imgUrl, then fade in
setup();
}

if i run this now it will fade the same image in and out forever, however if i add an alert at the "//alert here" comment it pops up alerts constantly and if you hit ok it changes image without animation. i have no idea what's wrong. anyone have any ideas? thanks in advance

[devnull69]

Try to understand that the comment line in your code

//once fadeout has completed, change src attribute of "imgm" to value of imgUrl, then fade in

is wrong, from the point of view of the asynchronous program flow. The order will be

1 - Start the fadeOut (running asynchronously)
2 - Set the src of imgm to the new imgURl (fadeOut is still being processed). The loading process of the image will start (running asynchronously)
3 - Start the fadeIn (running asynchronously). The fadeOut is still being processed, so fadeIn will only run after fadeOut finished (implicit queue). The loading process of the image might still be in progress
4 - Run setup again, which will run anim again (very very fast ... so all of the fadeOut and fadeIn will be queued very very fast but will run one after the other in intervals of 3 seconds)

[barrerr122]

oh ok i see what you mean, so would

setTimeout(anim(),6000);

fix that if i put it in setup? it should delay each run long enough for the animations to run. but that doesnt explain the problem of the image not changing when the animation usually plays though it does explain the behaviour when i add in the alert im not sure why the alert is causing this to happen when it doesnt happen normally.

[devnull69]

You should use the callback functionality provided for the animations. The callbacks will only be called after the animation finished. You should also combine this with an onload event handler for your images, so that you only fadeIn the new image after it has been loaded

function anim() {
   //fade out element with an id of "imgm"
   $("#imgm").fadeOut(3000,function(){
      // fade out has finished, load new image and fade it in
      var newImage = new Image();
      newImage.onload = function() {
         // after the new image has been loaded, update the src and fade in
         $("#imgm").attr("src", this.src);
         $("#imgm").fadeIn(3000,function(){
            // after fadeIn is complete, call setup() again
            setup();
         });
      };
      newImage.src = imgUrl;
   });
}