Question

I’ve created a simply Jquery image transition viewer, and every time a new photo is loaded, the window automatically scrolls up to the top of the new image that just loaded. I am trying to stop this, so that the transition does not interrupt wherever the user may be on the page.

Here is my code so far:

$(document).ready(function() {

var slideShow = function()
{
current_img = $("#current_img"); // <img> element with src to be changed
height_width = 'width="100%" height="100%"';
photos = new Array('images/home_s1.png','images/home_s2.png', 'images/home_s3.png');
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[0]); current_img.fadeIn('slow'); }); }, 0);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[1]); current_img.fadeIn('slow'); }); }, 5000);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[2]); current_img.fadeIn('slow'); }); }, 10000);
setTimeout(function() { slideShow(); }, 15000);
}

$("img").ready(slideShow);

});

I’ve tried multiple different ways of manipulating the preventDefault() function, and I have also tried different variations of loading the image (i.e. loading into html() instead of img.attr(‘src’)), but no luck… Any suggestions on the most efficient way of achieving this?

Answer 1

The problem you seem to be having is that the default implementation of .fadeIn() and .fadeOut() set the display property to none. That would make the element have 0 height and width, which would cause a sort of jumping effect.

You should use something like .fadeTo() instead and don’t take the opacity down all the way to 0 when you are switching the image. A value of something like 0.01 would also suffice and won’t make jQuery change the display attribute to none.

Here’s an example of what you need to do inside your setTimeout callback:

setTimeout( function() { 
    current_img.fadeTo( 'fast', 0.01, function() { 
        current_img.attr('src', photos[0]); 
        current_img.fadeTo('slow', 1); 
    }); 
});