Slide In and Slide Out images

Question

I am trying to achieve a smooth effect where, while one image is sliding out, another slides in. This animation needs to be in a way that while one thing is sliding out the other one is sliding in such that they both take up space inside the div at the same time.

Something like this or this

I created a simple jsFiddle, describing the problem that he faced.

    $("#googleLogo").hide("slide", {
        direction: "right"
    }, 500 );
    $("#yahooLogo").show("slide", {
        direction: "left"
    }, 500 );

I am basically sliding one thing out just before I start sliding the other one in. I think I am making a silly mistake somewhere.

Answer 1

That depends on your markup and style structure:

CSS:

#imageSliding {
   position:relative;
   height:100px;
}
#imageSliding img {
   position:absolute;
   left:0;
   top:0;
}
#yahooLogo {
  display:none;
}

CHECKOUT FIDDLE, might be you want something like this.