Question

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

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

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

Answer 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更改为您想要的任何持续时间......

Answer 2

试试这个：

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

Answer 3

你必须

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

或

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

使用jQuery进行AJAX回调效果

3 个答案: