带有 appendTo() 的 jquery 链式动画

Question

在我的页面上，我有多个类名为 course 的 div。然后有一个 id 为 dateForm 的 div。

我想要做的是将dateForm 添加到我单击的 course div 的任何实例中。它应该做的是从当前位置fadeOut，移动（appendTo）到它的新位置，然后fadeIn。

但是，它总是将自己附加到其新位置，然后淡出并淡入。知道为什么链不起作用吗？我尝试过延迟，我尝试将 appendTo 移动到另一个方法中并在 fadeOut 的回调中调用它，但没有任何效果。我什至尝试在淡出之后插入一个警报（），但是警报（）消息出现在淡出函数甚至运行之前。有什么想法吗？

          $(".course").click(function () {
            $("#dateForm").fadeOut("slow").appendTo($(this)).fadeIn("slow");
          });

Answer 1

问题是fadeOut 在动画完成之前立即返回。您应该在动画完成后使用回调参数运行代码：

$('.course').click(function(e){
    $("#dateForm").fadeOut("slow", function() { // code to run after the fadeOut is complete
        $(this).appendTo(e.target).fadeIn('slow');
    })
});