fadeIn / fadeOut causing browser to jump up page
Hi,
I have a very simple image rotator that brings in images then rotates through them using fadein/out.
You can see it going here:
http://krishanparmar.com. If you scroll down to the bottom of the page then wait a few seconds the main image will rotate and the browser will jump up (almost as if it's going to an anchor).
The images are brought in to a 100% div and the images are specified to 100% width (not sure if this is related but I'd thought i'd let you know!).
The code I'm using is this:
-
function run_slides(id){
var curid;
var nextid;
curid=id;
nextid=id+1;
//fade out the current one...
$('#gimg'+curid).fadeOut(fade_out_speed, function(){
$('#gimg'+nextid).fadeIn(fade_in_speed);
});// when done fade in the new one...
var maxx = $('#main').children().size();
if(nextid>maxx){
nextid=1;
}
// recurse
setTimeout('run_slides('+nextid+')', delay);
}
Then the images are like this:
-
<img style="" id="gimg1" src="wp-content/uploads/1.jpg" alt="Gallery Image" />
<img style="display:none;" id="gimg2" src="wp-content/uploads/2.jpg" alt="Gallery Image" />
<img style="display:none;" id="gimg3" src="wp-content/uploads/3.jpg" alt="Gallery Image" />
Any idea how I can stop this "jump"?
Thanks!