jQuery 一起使用 slideDown 和 replaceWith答案

【问题标题】：jQuery using slideDown and replaceWith togetherjQuery 一起使用 slideDown 和 replaceWith
【发布时间】：2012-11-08 05:11:07
【问题描述】：

我有两个 div：div1 和 div2

我正在尝试实现一种效果，其中 div1 动画为透明，最后，div2 在其顶部向下滑动（替换 div1）。

这是我尝试过的 (http://jsfiddle.net/RHSgf/4/)：

div1.animate({
   opacity: 0.0
}, 2000, function () {
   $(this).replaceWith(div2.hide().slideDown(2000, 'linear', function () {}));
});

但在 div1 的动画结束时，div2 并没有那么优雅地向下滑动。

我不知道为什么滑下来这么生涩。感谢您在寻找正确方法方面提供的任何帮助。

【问题讨论】：

标签： javascript jquery jquery-animate

【解决方案1】：

将slideDown 移出replaceWith，它应该可以工作：

$(this).replaceWith(div2.hide());
div2.slideDown(2000, 'linear');

http://jsfiddle.net/elclanrs/RHSgf/5/

【讨论】：

谢谢，这行得通。但是，与我的错误代码相比，有人也可以解释一下为什么这样做有效吗？
我不知道 TBH，我只知道因为你刚刚的经历，它不能以其他方式完成。

【解决方案2】：

试试这个并根据您的要求调整时间！

<script type="text/javascript">
 $(document).ready(function () 

                      {
                        $("#div2").fadeOut(2000);
                        setTimeout(function () {  $("#div1").slideDown(2000); }, 2000);
                      }
                 );

</script>

【讨论】：