I am coding my site to cycle through several images, fading from one to the next. It's working well, except when the page first loads, the first fade doesn't work. It simply cuts to the next scene. After that, they fade as intended.
This happens in all browsers.
Here's the html images:
- <img id="image" src="images/gallery/01.jpg" />
- <img id="imagenext" src="images/gallery/02.jpg" />
And the javascript:
- function swapImage(imageToFadeID)
- {
- $("#image").animate
- (
- { "opacity": "0" },
- "slow",
- "linear",
- changeImage()
- );
- };
- var i = 1;
- function changeImage()
- //counter +1
- {
- i = i + 1;
- //add "0" to image number "j" if less than 10.
- if (i < 10)
- {
- var j = "0" + i;
- }
- else
- {
- j = i;
- }
- //change top image to match bottom
- var topImage = document.getElementById("imagenext").src;
- document.getElementById("image").src = topImage;
- //make top image reappear
- document.getElementById("image").style.opacity = '1';
- //change out bottom image to next image.
- var btmImage = "images/gallery/" + j + ".jpg";
- document.getElementById("imagenext").src = btmImage;
- //reset counter if at end
- if (i > galleryCount - 1)
- {
- i = 0;
- }
- }