Question

I am using this script to fade out an image and fade in a new image:

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500);
    $('#picTwo').delay(3500).fadeIn(1000);
});

I would like the image to appear in the top center of the page, but I can’t get the images to appear in the same place, unless I use this CSS:

#picOne, #picTwo {
    position: absolute;
    display: none;
}

If I use position:relative for #picOne, picTwo, then I can center the images, but picTwo appears below picOne for a second as it fades in, which bumps the rest of my content down and just looks ridiculous. Using position:absolute solves this problem, but then it’s impossible to get it centered.

I thought that wrapping the two images in a div would help, but it doesn’t seem to make a difference:

<div id="pics">
<%= image_tag 'egg.png', :id => 'picOne' %> <%= image_tag 'egg2.png', :id => 'picTwo'  %>​
</div>

#pics {
        position:relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

Any thoughts? Thanks for your help!

Answer 1

You can try:

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500, function() {
        $('#picTwo').fadeIn(1000);
    });
});

Which will fadeIn() the #picTwo after #picOne fade out. So, they will remain in same space. But it seems in your code both of the images appear at the same time, so there’re collision with space.

To align the images at center you can use CSS text-align:center. See here.