jquery ajax成功淡出效果

jquery ajax success fade effects

本文关键字：淡出 成功 ajax jquery      更新时间：2023-09-26

我想在得到ajax响应后对页面进行一些效果，比如fadeIn。我试过了，

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

这是有效的，但数据是首先显示的，用500ms的闪光灯获得具有渐变效果的数据，但我需要直接获得具有渐变效应的加载数据。

我甚至尝试了用内容a淡出一个div，用内容B淡出同一个div。但我仍然遇到了同样的问题。

我也试过：

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

还是一样。我该如何解决这个问题？

这件事奏效了。。。。。。。。。

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

您尝试过吗：

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

我找到的最简单的方法是将初始fadeOut((设置为"0"。这非常有效：

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

因为用实际值设置初始fadeOut((会使其"弹出"，然后逐渐消失。仍然不是理想的结果。

因此，将初始fadeOut设置为0，意味着它在淡入之前不会花十分之一秒淡出。所以你不会得到奇怪的效果。

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

这将强制后续操作(将html添加到div(等待fadeOut完成。

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

概念是：一旦收到ajax响应，fadeIn消息-等待几秒钟(延迟(-fadeOut像这样------$('div.errorul'(.fadeIn(600(.html('msg'(.delay(1000(.fadeOut(500(；

相关文章：