Simple Image Swap Doesn't Work As Supposed To

[next]

JS:

script type="text/javascript">
i=0;
function fadeOut(ms) {
var opacity = 1;


function funcOut() {
opacity -= 0.1;
document.getElementById("gallery").style.opacity = opacity;


if (opacity <= 0) { window.clearInterval(fadingOut); }
}
var fadingOut = window.setInterval(funcOut, ms);
}
function fadeIn(ms) {
var opacity = 0;


function funcIn() {
opacity += 0.1;
document.getElementById("gallery").style.opacity = opacity;


if (opacity >= 1) { window.clearInterval(fadingIn); }
}
var fadingIn = window.setInterval(funcIn, ms);
}


function swap() {
i++;
if (i%2) {
fadeOut(500);
document.getElementById("gallery").src = 'http://www.collectiondx.com/files/BatmanARTFX5.JPG';
fadeIn(500);
} else {
fadeOut(500);
document.getElementById("gallery").src = 'http://ecx.images-amazon.com/images/I/41Wm2rA8sbL._SL500_AA300_.jpg';
fadeIn(500);
}
}


</script>

html:

<img class="fltrt" onload="setInterval(swap, 1500)" src="http://ecx.images-amazon.com/images/I/41Wm2rA8sbL._SL500_AA300_.jpg" width="400" height="400" alt="batman" id="gallery" />

 

there are 3 functions: fadeOut, fadeIn and swap.

Swap is basically calling fadeOut, to animate fade out of the image, then it supposed to change the image and fade in. However it doesn't work as it should.

I checked fadeOut, it works perfectly; then I checked fadeIn, it also works well; I verified value of "i" to make sure that i%0 alternates images as it should, and that works too! Lastly I checked the html is each each image swap, and that worked fine.

What's going on? Every part of the code works as it should, yet when I put it all together it's broken. It fades and swaps, but not in set intervals and out of order.

Can anyone suggest a solution?

Edited December 2, 2012 by next

[DavidAM]

fadeOut(500);
document.getElementById("gallery").src = 'http://www.collectiondx.com/files/BatmanARTFX5.JPG';
fadeIn(500);

 

The call to fadeOut() will return immediately while the "fading" is being processed by a timer element. The image will be swapped and fadeIn() will be called; this function will also return immediately. At which point, you have two (asynchronous) timers running, one reducing the opacity, and the other increasing the opacity.

 

That's the problem. Sadly, I don't have a solution for you. I don't do much in Javascript, and when I do, I use JQuery as much as possible.

[next]

Oh, ok.

I wish I could use jQ, but for this code I'm not allowed to call other files (like libraries).

[DavidAM]

Maybe something like this?

 

function swap() {
   i++;
   if (i%2) {
       fadeSwap(500, 'http://www.collectiondx.com/files/BatmanARTFX5.JPG');
   } else {
       fadeSwap(500, 'http://ecx.images-amazon.com/images/I/41Wm2rA8sbL._SL500_AA300_.jpg');
   }
}


function fadeSwap(ms, img) {
   var fadeChange = -0.1;    // Start by Fading OUT
   var newImage = img;        // Hold the new image file name
   var opacity = document.getElementById("gallery").style.opacity = opacity;    // Get the Current opacity

   function doFadeSwap() {
       if (opacity <= 0) {                // The image is faded out completely
           document.getElementById("gallery").src = newImage;    // Swap the image
           fadeChange = +0.1;            // Change Direction (now we'll fade in)
       } else if (opacity >= 1) {        // The image is faded in completely
           window.clearInterval(fadingSwap);    // Stop the timer
       }
       opacity += fadeChange;        // Increase or Decrease the Opacity
       document.getElementById("gallery").style.opacity = opacity;

   }

   var fadingSwap = window.setInterval(doFadeSwap, ms);
}

 

Remember, I warned you, I'm not great with JS