javascript - 用左滑动画替换div

Question

我想通过幻灯片动画将一个 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"));

Answer 1

这是我为使 javascript 正常工作而进行的更新

jsfiddle

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

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

更新:

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