jquery ajax成功淡入淡出效果

Question

一旦获得ajax响应，我想做一些诸如fadeIn的效果来翻页。我尝试过了，

$.ajax({
        type: "post",
        url: actionLink,
        cache: false,
        data: ....someData....,
        success: function(data) {
           $(".response").fadeOut(100);
           $(".response").html(data);
           $(".response").fadeIn(500);
        }
    });

这是有效的，但首先显示数据，并以500ms的闪光显示具有淡入淡出效果的数据，但我需要直接获得具有淡入淡出效果的加载的数据。

我什至尝试使用Fade out a div with content A, and Fade In the same div with content B，但仍然遇到相同的问题。

我也尝试过：

$(".response").fadeOut(100).hide();
$(".response").show().html(data).fadeIn(500);

还是一样。我该如何解决？

Answer 1

这件事起作用了.........

jQuery(".response").fadeOut( 100 , function() {
    jQuery(this).html( data);
}).fadeIn( 1000 );

Answer 2

您是否尝试过：

$(".response").fadeOut(100).html(data).fadeIn(500)

Answer 3

我发现的最简单的方法是将初始的fadeOut（）设置为'0'。这非常有效：

$(".response").fadeOut(0).html(result).fadeIn(500);

设置具有实际值的初始fadeOut（）会使它“弹出”，然后逐渐淡入。仍然不是理想的结果。

因此，通过将初始fadeOut设置为0，意味着它不会在淡入之前花掉十分之一秒的时间。因此，您不会得到奇怪的效果。

Answer 4

尝试$(".response").fadeOut(100).delay(100).html(data).fadeIn(500)

这将强制后续操作（在div中添加html）要等到fadeOut完成之后。

Answer 5

success:function(data)
{
   $(".response").fadeOut(600, function ()
       {
          $(".response").html(data)
        });
   $(".response").fadeIn(600);
}

Answer 6

概念是：收到ajax响应后，淡入消息-等待几秒钟（延迟）-淡出像这样 - - - $（'div.errorul'）。fadeIn（600）.html（'msg'）.delay（1000）.fadeOut（500）;