如何为 AJAX 帖子制作动画？答案

【问题标题】：How to animate AJAX post?如何为 AJAX 帖子制作动画？
【发布时间】：2013-07-29 00:02:56
【问题描述】：

很抱歉这个请求，但我是 AJAX 初学者。我有以下脚本，我正在尝试对其进行动画处理（类似于“淡入淡出”）。

jQuery(document).ready(function($){
   $(document).on("click",".ratingemo", function(){
     var rating = $(this).attr("id").substr(0, 1);
     var id = $(this).attr("id").substr(1);
     var data = "id="+id+"&rating="+rating;

     $.ajax({
       type: "POST",
       url: "/ldplug/rate.php",
       data: data,
       success: function(e){
         $("#r"+id).html(e);
       }
     })
   });
});

我该怎么做？

非常感谢！

【问题讨论】：

我认为你并没有试图淡入你的代码，所以它不是你试图动画的脚本，而是你页面上的一些 HTML 元素。这意味着您必须显示 HTML 的相关部分，并描述应淡入的部分以及何时淡入。

标签： ajax jquery animation jquery-animate

【解决方案1】：

首先live 已被弃用，请查看on。但话虽如此，为什么不呢：

success: function(e){
         $("#r"+id).hide();
         $("#r"+id).html(e).fadeIn("slow");
       }

最好先隐藏$("#r"+id)，我只是为了说明这一点而隐藏它。

【讨论】：

谢谢，marteljin。是的，live 已被弃用，抱歉。刚刚更新了我的脚本。

【解决方案2】：

没有看到你的 HTML，我不得不假设这样的东西对你有用。隐藏元素，填充它，然后淡入。

jQuery(document).ready(function ($) {
    $(".ratings").live("click", function () {
        var rating = $(this).attr("id").substr(0, 1);
        var id = $(this).attr("id").substr(1);
        var data = "id=" + id + "&rating=" + rating;

        $("#r" + id).hide();
        $.ajax({
            type: "POST",
            url: "/ratings/rate.php",
            data: data,
            success: function (e) {
                $("#r" + id).html(e);
                $("#r" + id).fadeIn();
            }
        })
    });
});

【讨论】：

无需查询元素 3 次 - 使用方法链（即$(...).hide().html(e).fadeIn()）