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

那一個確實適用「更新」級，但實際上淡出刪除數據的整行（父（）父（）是標籤，我「M定位）。

$(".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"); 
     }); 
    }); 
}); 

我還做了一個小提琴：http://jsfiddle.net/northkildonan/rmj75wr2/

Answer 2

你需要使淡入做它的東西，然後淡出事件觸發使用回調。

變化

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

到

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