jquery 同时淡入淡出

Question

我试图淡出对话框的现有文本，然后同时淡入错误图像。

我该怎么做？现在我已经（在某种程度上）工作了，但有一些问题。

1. 它立即淡出
2. 它不是同时的（我希望 1 淡入，而另一个淡出）。

注意：我不能只是淡入 div，因为整个程序 #dialog 都被写入，所以如果我将 div.error 存储在那里，它就会被覆盖，所以我需要这样做。

到目前为止我所拥有的

$.ajax({
            type: "POST",
            url:  "/checkstatus/" + id,
            dataType: "html",
            error: function(data){
                $("#dialog").fadeOut();
                $("#dialog").hide().html("<img src='/img/deleted.jpg' alt='deleted'>")
                $("#dialog").fadeIn();
            }
        });

Answer 1

$.ajax({
    type: "POST",
    url:  "/checkstatus/" + id,
    dataType: "html",
    error: function(data){
        $("#dialog").fadeOut(function(){
             $("#dialog")
                .html("<img src='/img/deleted.jpg' alt='deleted'>")
                .fadeIn()
        });

    }
});

Answer 2

您不能让一个对象同时淡出和淡入 - 该对象一次只能有一种状态（淡入或淡出，但不能同时淡入和淡出两者）。

如果您确实想要这种视觉效果，则需要两个单独的对象，一个淡出，另一个淡入。例如，当淡出一张图像并同时淡入下一张图像时，这就是多少幻灯片的工作原理。它们实际上是淡出一个对象并淡入另一个对象。

因此，如果您确实希望对话框具有同时淡入淡出的视觉效果，则需要两个对话框，一个淡出，另一个淡入。

如果您愿意按顺序执行它们，则旧对话框会淡出，然后然后新的淡入淡出（两个淡入淡出是一个接一个，而不是同时进行），然后您可以使用 Vitaly 提出的代码类型，在其中执行 fadeOut()，然后，在补全函数中对于fadeOut()，您可以更改对话框的内容，然后执行fadeIn()。

如果您有理由只需要一个对话框并希望同时淡入淡出，那么您可以 fadeOut() 对话框中的一个内容块并 fadeIn 另一内容块。您可以将每个内容块放在同一个对话框内其自己的 div 中，然后将一个内容淡出，另一个淡入。您还必须手动将两个 div 放置在彼此之上（重叠）。这是可能的，但需要更多的工作。