CODEWITHSUNDEEP
jqueryjquery-ui
Abijeet Patro
Abijeet Patro

Reputation: 2884

Slide In and Slide Out images

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.

Upvotes: 4

Views: 3419

Answers (1)

Jai
Jai

Reputation: 74738

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.

Upvotes: 7

Related Questions