CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1240679
user1240679

Reputation: 6979

Slide contents from one div into the other

I have a markup arranged as follows in my website:

<body>
    <div id="wrapper">
    <div id="middle">
        <div class="red-container">
            <div class="row">
                Middle. Row 1.
            </div>
        </div>
    </div>
    <div id="right">
        <div class="green-container">
            <div class="row">
                Right. Row 1.
            </div>
        </div>
     </div>
   </div>
</body>

The right div as would be obvious has to be towards the right of the middle div. Here's the fiddle (right div here inside my fiddle somehow is not actually to the right of middle div) : http://jsfiddle.net/NNMYS/

I am trying to achieve a sliding effect here:
All the content from the middle div should slide to the left and get removed after the animation. On the other hand, simultaneously, the content from the right div (which in my case will be added by ajax to the right div) should slide from the right div to the middle div (and removed from the right div). How can that be done?

I could have done a content slider directly by having all the content directly placed separated by positions and sliding to the clicked item. But here since I would be adding content by ajax and also have some responsive implementation, in my case that doesn't seem to possible.

Upvotes: 1

Views: 118

Answers (1)

David Allen
David Allen

Reputation: 1163

Look at this. I think this might help

http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

Upvotes: 1

Related Questions