Question

我想通过幻灯片动画替换div的内容;第一个div滑到框的左侧（隐藏），而第二个滑入。

我试过这个;

但它似乎没有做任何事情。我究竟做错了什么？

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

Answer 1

这是我的javascript工作的更新

jsfiddle

主要更改是我添加了$(document).on('click')事件以触发动画并将left切换为margin-left，因为您没有使用相对或固定定位

这应该让你朝着正确的方向前进

更新

另外，我添加了javascript以从第二个div中删除"display: hidden;"

Answer 2

GreenSock Animation Platform (GSAP) 与private function processForm(EventInterface $event, array $parameters, $method = "PUT") { $form = $this->formFactory->create(new EventType(), $event, array('method' => $method)); $form->submit($parameters, 'PATCH' !== $method); $event = $form->getData(); $validator = $this->container->get('validator'); $listErrors = $validator->validate($event); if ($form->isValid() && count($listErrors) === 0) { $event->setAge(); $this->om->persist($event); $this->om->flush($event); } / TweenLite。与jQuery或CSS3过渡相比，它提供了更平滑的过渡，具有更大的自定义。为了使用TweenLite / TweenMax为CSS属性设置动画，您还需要他们的插件名为“CSSPlugin”。 TweenMax自动包含它。

首先，加载TweenMax库：

TweenMax

或轻量级版本，TweenLite：

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

然后，调用你的动画：

<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>

您也可以使用ID选择器调用它：

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

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

如果您加载了jQuery，则可以使用更高级的广泛选择器，例如包含特定类的所有元素：

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

有关详细信息，请参阅： TweenLite Documentation

根据他们的网站： “TweenLite是一款极其快速，轻量且灵活的动画工具，可作为GreenSock动画平台（GSAP）的基础。”

用左进幻灯片动画替换div

2 个答案: