I would like to replace a div's contents with another via a slide animation; the first div slides to the left outside of the box (hidden), whilst the second slides in.

I tried this;

/

But it does not appear to be doing 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"));

I would like to replace a div's contents with another via a slide animation; the first div slides to the left outside of the box (hidden), whilst the second slides in.

I tried this;

http://jsfiddle/DTcHh/1203/

But it does not appear to be doing 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"));

• javascript
• jquery
• css
• css-animations

• You're not triggering an animation by any means. You're just declaring it. – Radu Andrei Commented Sep 23, 2014 at 20:25
• Your code seems fine, but, it never works. I mean by that, it never execute. The only problem I can see right now, is that you never trigger the animation of the $oldBox. So, never gonna see the execution. – Academia Commented Sep 23, 2014 at 20:26
• The default value for the css property position is static, so changing the left property will not have any effect unless you change position to something like relative – Stryner Commented Sep 23, 2014 at 20:40

2 Answers 2

Here is my update to get the javascript working

jsfiddle

The main changes were that I added the $(document).on('click') event to fire 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

Update:

Also, I added javascript to remove the "display: hidden;" from your second div

GreenSock Animation Platform (GSAP) with TweenLite / TweenMax. It provides much smoother transitions with far greater customization than jQuery or CSS3 transitions. In order to animate CSS properties with TweenLite / TweenMax, you'll also need their plugin called "CSSPlugin". TweenMax includes this automatically.

First, load the TweenMax library:

<script src="https://cdnjs.cloudflare./ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Or the lightweight version, TweenLite:

<script src="https://cdnjs.cloudflare./ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Then, call your animation:

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

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

You can also call it with an ID selector:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

If you have jQuery loaded, you can use more advanced broad selectors, like all elements containing a specific class:

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

For full details, see: TweenLite Documentation

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