用左侧幻灯片动画替换div
用左侧幻灯片动画替换div
提问于 2014-09-23 20:09:43
我想通过幻灯片动画将div的内容替换为另一个；第一个div在框外(隐藏)向左滑动，而第二个幻灯片则在其中。
我试过这个；
http://jsfiddle.net/DTcHh/1203/
但它似乎并没有做任何事情。我做错了什么？
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"));回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-23 20:32:17
下面是我的更新，以使javascript正常工作
主要的更改是我添加了$(document).on('click')事件来触发动画，并将left切换到margin-left，因为您没有使用相对定位或固定定位。
这应该会让你走上正确的方向
更新：
此外，我还添加了javascript以从第二个div中删除"display: hidden;"。
Stack Overflow用户
发布于 2015-11-05 18:21:47
和TweenLite / TweenMax。与jQuery或CSS3转换相比，它提供了更好的定制，从而提供了更平滑的转换。为了用TweenLite / TweenMax动画CSS属性，您还需要它们的插件"CSSPlugin“。TweenMax自动包含此内容。
首先，加载TweenMax库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>或轻量级版本，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>然后，调用：
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});您也可以使用ID选择器来调用它：
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});如果加载了jQuery，可以使用更高级的广义选择器，就像包含特定类的所有元素：
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});有关详细信息，请参阅： TweenLite文档
根据他们的网站："TweenLite是一个非常快速，轻量级，灵活的动画工具，作为GreenSock动画平台的基础。“
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26003895
复制相关文章
相似问题
腾讯云开发者
