ajax成功后jQuery addClass / removeClass

I've got an ajax form submission working well but I'd like to add a "success" class to indicate to the user that the request was completed when the user checked or unchecked a box. I've tried a few things so far:

我有一个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);
          });
        } 
    });
});

That one does indeed apply the "updated" class but the fadeOut actually removes the entire row of data (parent().parent() is the tag that I'm targeting.)

那个确实应用了“更新”类，但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");
      } 
  });
});

I also tried this, but all that happens is that it (evidently) removes the existing class, adds the new one, and then does the same thing in reverse immediately so the new class is never seen. It appears that the 1000 delay is ignored despite the fact that I'm running jQueryUI on this site.

我也试过这个，但所有发生的事情是它（显然）删除现有的类，添加新的类，然后立即反向执行相同的操作，以便永远不会看到新的类。尽管我在这个网站上运行jQueryUI，但似乎忽略了1000延迟。

Thanks to anyone who can help!

感谢任何能提供帮助的人！

EDIT: Adding in HTML code:

编辑：添加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>

2 个解决方案

#1

i don't really know how your fade-effect is supposed to look like. it did make more sense to me to fade out the old class before adding the new one and fading it in. cause you can't see the <tr> which is including the checkbox, when it's faded out at the start.
briansol is right with his callbacks and i used fadeTo here to prevent jQuery from setting display: none:

我真的不知道你的褪色效果是怎么样的。在添加新类并淡入它之前淡出旧类确实更有意义。因为当它在开始时淡出时，你看不到包含复选框的。 briansol对他的回调是正确的，我在这里使用fadeTo来阻止jQuery设置di​​splay：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");
        });
    });
});

i also made a fiddle: http://jsfiddle.net/northkildonan/rmj75wr2/

我也做了一个小提琴：http：//jsfiddle.net/northkildonan/rmj75wr2/

#2

You need to use a callback so that the fadein does its thing and THEN the fadeout event fires.

您需要使用回调，以便fadein执行其操作，然后fadeout事件触发。

change

更改

      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);
      });

to

至

      var oldClass = clickedObj.attr("class");

      clickedObj.removeClass(oldClass).addClass("updated");  

      clickedObj.fadeIn(1400, function() {
        clickedObj.fadeOut(1400, function() {
          clickedObj.removeClass("updated").addClass(oldClass);  //probably unnecessary as its now in a display:none state
      });