ajax成功后的jQuery addClass/removeClass

Question

我的 ajax 表单提交运行良好，但我想添加一个“成功”类，以向用户指示当用户选中或取消选中某个框时请求已完成。到目前为止我已经尝试了一些方法:

    $(".box").change(function() {
    var id=$(this).val();
    var dataString = "id=" + id + "&crudtype=myapp";
    var clickedObj = $(this).parent().parent();
    $.ajax( {
        type: "POST",
        url: "/myphppage",
        data: dataString,
        cache: false,
        success: function() {
          var oldClass = clickedObj.attr("class");
          clickedObj.fadeIn(1400, function() {
            clickedObj.removeClass(oldClass);
            clickedObj.addClass("updated");  
          });
          clickedObj.fadeOut(1400, function() {
            clickedObj.removeClass("updated");  
            clickedObj.addClass(oldClass);
          });
        } 
    });
});

那个确实应用了“更新”类，但 fadeOut 实际上删除了整行数据(parent().parent() 是我要定位的标签。)

$(".box").change(function() {
  var id=$(this).val();
  var dataString = "id=" + id + "&crudtype=myapp";
  var clickedObj = $(this).parent().parent();
  $.ajax( {
      type: "POST",
      url: "/myphppage",
      data: dataString,
      cache: false,
      success: function() {
        var oldClass = clickedObj.attr("class");
        clickedObj.removeClass(oldClass);
        clickedObj.addClass("updated", 1000);
        clickedObj.removeClass("updated", 1000);
        clickedObj.addClass("updated");
      } 
  });
});

我也尝试过这个，但所发生的只是它(显然)删除了现有的类，添加了新的类，然后立即反向执行相同的操作，因此永远不会看到新的类。尽管我在此站点上运行 jQueryUI，但 1000 延迟似乎被忽略了。

感谢任何可以提供帮助的人!

编辑:添加 HTML 代码:

<table id="datatable" class="display dataTable" role="grid">
  <tbody>
    <tr class="odd" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="1234" name="actionitem[]"></td>
    </tr>
    <tr class="even" role="row">
      <td class="formcell"><input id="actionitem" class="box" type="checkbox" value="5678" name="actionitem[]"></td>
    </tr>
</table>

Answer 1

我真的不知道你的淡入淡出效果应该是什么样子。对我来说，在添加新类并淡入之前淡出旧类确实更有意义。因为你看不到 <tr>其中包括复选框，当它在开始时淡出时。
briansol 的回调是正确的，我使用了 fadeTo这里防止jQuery来自设置 display: none :

$(".box").on("click", function () {
    clickedObj = $(this).parent().parent();

    clickedObj.fadeTo(1400, 0.01, function(){
        clickedObj.removeClass("oldClass").addClass("updated");
        clickedObj.fadeTo(1400, 1.0, function(){
            clickedObj.removeClass("updated").addClass("oldClass");
        });
    });
});

我还做了一个 fiddle :http://jsfiddle.net/northkildonan/rmj75wr2/