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"));
source to share
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.
Update:
Also, I added javascript to remove "display: hidden;"
from your second div
source to share
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)."
source to share