Slide In and Slide Out images

215
November 26, 2016, at 5:25 PM

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.

READ ALSO
Insert a page break after specific string from an array javascript

Insert a page break after specific string from an array javascript

I have made a code that needs to make page-breaks after certain number of new lines or wordsI have set up an array that tell me where it should cut in my element

271
Jquery appendTo() not working on Chrome Adnroid

Jquery appendTo() not working on Chrome Adnroid

I've developed a search function that gets an element from a div and shows it on a results div while typing on a textbox, you can see it here: http://elcostalco/index

274
How can I make my div element move more than 200px?

How can I make my div element move more than 200px?

I've been working on a project using jQuery where i have a div element that says "click," and when you try to click on it, it moves to a random location within the windowThe issue I'm having is that every once in a while the div will move only a little...

212
insert current element before previous one

insert current element before previous one

I'm checking to see if element is last in the container div by getting length on next element with classitem (if there is such element, it means that I am currently not at the end of the container div)

300