jQuery Forum

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:

1. <img id="image" src="images/gallery/01.jpg" />
2. <img id="imagenext" src="images/gallery/02.jpg" />

And the javascript:

1. function swapImage(imageToFadeID)
2. {
3.     $("#image").animate
4.     (
5.         { "opacity": "0" },
6.         "slow",
7.         "linear",
8.         changeImage()
9.     );
10. };
11. var i = 1;
12. function changeImage()
13.     //counter +1
14.     {
15.     i = i + 1;
16.     //add "0" to image number "j" if less than 10.
17.     if (i < 10)
18.         {
19.         var j = "0" + i;
20.         }
21.     else
22.         {
23.         j = i;
24.         }
25.     //change top image to match bottom
26.     var topImage = document.getElementById("imagenext").src;
27.     document.getElementById("image").src = topImage;
28.     //make top image reappear
29.     document.getElementById("image").style.opacity = '1';
30.     //change out bottom image to next image.
    
31.     var btmImage = "images/gallery/" + j + ".jpg";
32.     document.getElementById("imagenext").src = btmImage;
33.     //reset counter if at end
34.     if (i > galleryCount - 1)
35.         {
36.         i = 0;
37.         }
38.     }