jquery ajax成功淡入淡出效果

发布于 2024-11-18 00:15:51 字数 771 浏览 0 评论 0原文

我想在收到 ajax 响应后执行一些效果，例如 fadeIn 到页面。我尝试了这个，

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

这是有效的，但首先显示数据，并闪烁 500 毫秒获取具有淡入淡出效果的数据，但我需要直接使用淡入淡出效果获取加载的数据。

我什至尝试过淡出内容 A 的 div，并淡入内容 B 的同一 div，但我仍然遇到同样的问题。

我也尝试过：

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

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

原文

I would like to do some effects like fadeIn to page once I get the ajax response.
I tried this,

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

This is working but data is displayed first and with a flash of 500ms getting data with fade effect but I need to get the loaded data directly with fade effect.

I even tried with Fade out a div with content A, and Fade In the same div with content B, but I still get the same issue.

I also tried:

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

Still the same. How do I fix this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生池水覆流年 2024-11-25 00:15:51

这东西起作用了......

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

This thing worked.........

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

回复收藏 0 原文

神回复 2024-11-25 00:15:51

你有没有尝试过：

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

Have you tried:

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

回复收藏 0 原文

违心° 2024-11-25 00:15:51

我发现的最简单的方法是将初始 fadeOut() 设置为“0”。这非常有效：

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

因为用实际值设置初始 fadeOut() 会使其“弹出”，然后淡入。仍然不是理想的结果。

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

The easiest way I found was to set the initial fadeOut() to '0'. This worked perfectly:

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

As setting an initial fadeOut() with an actual value makes it 'pop' in, and then it fades in. Still not the desirable result.

So by setting the initial fadeOut to 0, means it doesn't spend a tenth of a second fading out before fading in. So you don't get a strange effect.

回复收藏 0 原文

从此见与不见 2024-11-25 00:15:51

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

这将强制执行后续操作（将 html 添加到您的 div ) 等待淡出完成后。

回复收藏 0 原文

优雅的叶子 2024-11-25 00:15:51

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

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

回复收藏 0 原文