jQuery 的 AJAX 回调效果答案

【问题标题】：AJAX callback effects with jQueryjQuery 的 AJAX 回调效果
【发布时间】：2012-04-11 09:48:15
【问题描述】：

我偶然发现了一个问题。我正在使用一个用 jQuery 编写的简单 AJAX 脚本，例如，我想做一个 AJAX 回调来更改带有 easeInOut 效果的 html，但我不知道该怎么做，因为现在，当响应到来时，div 的内容会发生变化带有某种闪烁效果，非常难看，我认为这是默认的“效果”。

脚本：（我尝试将.fadeOut('slow') 添加到html() 方法中，但没有任何改变）

$.ajax({
    type: "POST",
    url: "institutions-filter.action",
    data: data,
    cache: false,
    success: function(result){
        $("#display-block").html(result);
    }
});

【问题讨论】：

标签： jquery ajax effect

【解决方案1】：

在更改 html 之前隐藏它，然后显示它：

$.ajax({
    type: "POST",
    url: "institutions-filter.action",
    data: data,
    cache: false,
    success: function(result)
    {
        var $el = $("#display-block");

        $el.fadeOut(400, function()
        {
            $el.html(result).fadeIn(400);
        });
    }
});

将400 更改为您想要的任何持续时间...

【讨论】：

太棒了，“谢谢”不足以感谢您。谢谢。 :)

【解决方案2】：

试试这个：

$.ajax({
                type: "POST",
                url: "institutions-filter.action",
                data: data,
                cache: false,
                success: function(result){
                 $("#display-block").html(result).fadeTo("slow", 1);
                }
            });

【讨论】：

谢谢，不过，fadeTo 是我最喜欢的效果，比如“easyInOut”，我在所有项目中都使用它：]

【解决方案3】：

你必须

$("#display-block").hide().html(result).fadeIn('slow');

或者

$("#display-block").fadeOut('slow').html(result).fadeIn('slow');

【讨论】：

我已经使用了 Joseph Silber 解决方案，但我会为你投票 :) 谢谢。
您需要使用回调函数来正确地将它们链接在一起。