HI there, I have a really annoying and strange problem with a script, here's the code:

<script type="text/javascript">

$(function() {
	var images = $('.home_page_pic img').hide();
	var index = 0;

	function swapImages()


		images.eq(index).fadeOut(2000, function() {


		if (index == images.length)


				index = 0;

		images.eq(index).fadeIn(2000, swapImages);



});          </script>

Now, in chrome and opera at the first run of the script the big picture doesn't actually get replaced but it stays there and the other big pictures that are supposed to replace it appear instead at the bottom of it. Then at the second run, it all goes ok.
Here you can see what I mean (either with opera or chrome and if it doesn' happen try ctrl+f5 on ur keyboard http://antobbo.webspace.virginmedia.com/photogallery/home.htm)

I think I have found what causes the problem, although I don't know how to resolve it.
I was looking at the script behaviour in chrome using the console when I noticed that at the first run of the script the first image "images/animal_full_2.jpg" keeps display:inline; rather than doing what all the rest of the pix do which is change the display property to "none"; this is what causes the first picture to remain in the box and the other ones that are supposed to replaced it in turn, to appear below instead.
Funnily enough, as I said in my previous post, this happens only on the first run of the script and only in chrome (and not also in opera as previously said).
I had a look at the jquery website at the .hide() method and it says that

If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Now, what I am doing in the script is to show first and then then hide pictures but, from what I understand, the .hide() method doesn't work properly on the first run because it is supposed to change the default display:inline; to display:none; and that's not happening.
anybody's got a suggestion?