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;

http://jsfiddle.net/DTcHh/1203/

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"));

      

+3


source to share


2 answers


Here is my update for javascript to work

jsfiddle

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.

Update:

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

from your second div

+3


source


GreenSock Animation Platform (GSAP) withTweenLite

/TweenMax

. 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="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

      

Or the lite version of TweenLite:

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

      

Then call the 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 using an ID selector:

 TweenLite.to("#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.
TweenLite.to(".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)."

+1


source







All Articles