淡出内容 A 的 div，并淡入内容 B 的同一 div答案

【问题标题】：Fade out a div with content A, and Fade In the same div with content B淡出内容 A 的 div，并淡入内容 B 的同一 div
【发布时间】：2010-11-26 23:42:57
【问题描述】：

我有以下几点：

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $('#conteudoInscricao').fadeOut('slow', function() {
            $.ajax({
                url: target,
                    success: function(data) {
                        $('#conteudoInscricao').html(data);
                        $('#conteudoInscricao').fadeIn('slow');
                    }
            });
        });
        return false;
    });
});

这几乎可以正常工作。问题是……效果不流畅。我的意思是，它首先淡出内容 A，然后保持空白，然后淡入内容 B。

我想要缓和效果，这样，当他在接近尾声时逐渐淡出时，他开始淡入，这样效果就可以平滑了。

下面的代码如何实现？

提前非常感谢，内存

【问题讨论】：

标签： jquery ajax fadein fadeout

【解决方案1】：

试试这个：

$(function() {
    $('.ajaxloader').click(function(event) {
        var target = $(this).attr('href');
        window.location.hash = target;
        $.ajax({
            url: target,
            success: function(data) {
                $('#conteudoInscricao')
                    .fadeOut('slow', function() {
                        $(this).html(data).fadeIn('slow');
                    });
            }
        });
        return false;
    });
});

所以只有在你检索到数据后才会产生效果，避免了等待数据响应的任何时间间隔。

【讨论】：

您需要将您的.html() 呼叫排队。现在，即使它是第二行，它也会立即执行。
@dubrox - 很好的更新。只是我会做一些笔记。首先，在回调中，您应该使用$(this) 而不是使用$('#conteudoInscricao') 进行DOM 选择。第二件事不太重要。您仍然可以将.fadeIn() 调用放在.fadeOut() 之后的位置，因为动画会自动排队。可能会使它更容易阅读，尽管结果是相同的。 :o)
由于 AJAX 调用通常是异步的，您可以在某个时间点触发它，并在完全收到服务器响应后获取数据。因此，“成功”回调将在您进行 AJAX 调用后仅几毫秒被调用，在此期间，如果您触发了其他动画，这些动画将在不等待数据的情况下运行。要在做其他事情之前等待数据，只需将所有这些内容放在 AJAX 回调中。通常，回调用于确保在给定事件完成后执行某些操作。
@MEM - 您可能已经注意到，当您运行动画时，您的其他 javascript 代码会继续工作。换句话说，它不会冻结。原因是，虽然 javascript 通常按顺序执行，但有一些函数调用从正常流程中取出。这些类型的调用用于创建动画。因此，如果动画从 javascript 的正常流程中移除，您如何在动画之后执行某些内容？答案是需要手动处理。 jQuery 为你做这件事。
...您将应该在动画之后执行的代码作为 callback 参数传递。 jQuery 确保您传递的函数将在动画完成后被调用。如果你不将它作为回调传递，它会立即执行。为什么？同样，因为动画已从正常的 javascript 执行流程中移除。因此动画不会阻止其他 javascript（如 .html()）执行。

【解决方案2】：

目前它不会，因为淡入淡出直到淡出完成才会开始！

【讨论】：

这肯定是评论，而不是答案？