Replace div with left mouse button in slide animation

I would like to replace the content of a div with a different one using a slide animation; the first div slides to the left outside of the margin (hidden) and the second slide.

I tried this;

But he doesn't do anything. What am I doing wrong?

        var $oldBox = $("#signup .box[data-step=1]");
        var $newBox = $("#signup .box[data-step=2]");

        var outerWidth = $oldBox.outerWidth(true);
        var posSlideOut = (2 > 1 ? -outerWidth : outerWidth);
        var posSlideIn = (2 > 1 ? outerWidth : -outerWidth);

        $.when($oldBox.animate({left: posSlideOut}, "slow"), $newBox.css("left", posSlideIn + "px").animate({"left": 0}, "slow"));



source to share

2 answers

Here is my update for javascript to work


The main change was that I added an event $(document).on('click')

to trigger the animation and switched left

to margin-left

, since you are not using relative or fixed positioning

This should get you in the right direction.


Also, I added javascript to remove "display: hidden;"

from your second div



GreenSock Animation Platform (GSAP) withTweenLite


. It provides much smoother transitions with much more customization than jQuery or CSS3 transitions. To animate CSS properties with TweenLite / TweenMax, you also need their plugin called "CSSPlugin". TweenMax turns this on automatically.

First download the TweenMax library:

<script src=""></script>


Or the lite version of TweenLite:

<script src=""></script>
<script src=""></script>
<script src=""></script>


Then call the animation:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease}), .7, { x: 500, ease: Power3.easeOut});


You can also call it using an ID selector:"#myID", .7, { x: 500, ease: Power3.easeOut});


If you've downloaded jQuery, you can use more advanced wide selectors like all elements that contain a specific class:

 // This will parse the selectors using jQuery engine.".myClass", .7, { x: 500, ease: Power3.easeOut});


For details, see the following topics: TweenLite Documentation

According to their website, "TweenLite is an extremely fast, lightweight and flexible animation tool that serves as the backbone of the GreenSock Animation Platform (GSAP)."



All Articles