Question

I stumbled upon a problem. I’m using a simple AJAX script written in jQuery, I want to make the AJAX callback to change html with easeInOut effect for example, but I don’t know how to do it, because now, when the response comes, div’s content changes with some kind of blinking effect, that is very ugly, I assume that is the default “effect”.

The script: (I tried to add .fadeOut('slow') to the html() method, but nothing changed)

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

Answer 1

Hide it before changing the html, then show it:

$.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);
        });
    }
});

Change 400 to whatever duration you want…