javascript - 用左侧幻灯片动画替换div

我想通过幻灯片动画将div的内容替换为另一个。第一个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"));

最佳答案

这是我的更新，以使JavaScript工作

jsfiddle

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

这应该可以指引您正确的方向

更新:

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