jQuery fadeOut 将不透明度设置为 1

Question

我会保持简短，考虑这一行:

$record.fadeOut(250);

其中 $record 是一个表格行，如下所示:

<tr id="5194c885eb9fbf38aa000026" class="record">
   <td>Test</td>
   <td>2013/05/16 - 13:52</td>
   <td>2013/05/16 - 13:52</td>
   <td class="recordActions">
       <a title="Edit" href="/2configure/templates/devicetypes/5194c885eb9fbf38aa000026/edit" class="edit">
           <img src="/icons/document--pencil.png" alt="edit">
       </a>
       <a title="Delete" href="/2configure/templates/devicetypes/5194c885eb9fbf38aa000026" class="delete">
           <img src="/icons/cross.png" alt="delete">
       </a>
   </td>
</tr>

我绝对确定 $record 包含此元素，而不包含其他元素。

未应用 CSS。 .fadeOut(250)之后，结果是:

<tr id="5194c885eb9fbf38aa000026" class="record" style="opacity: 1">
    ...
</tr>

什么给了？!？

jQuery 版本 1.7.1

编辑:完整功能

function onEntityUpdateSuccess(record_html, statusText, jqXhr, jqForm) {
    var $record = $(".record#" + jqForm.find('input[name="id"]').val());
    var $listingContainer = $record.parents(".listingContainer");
    if(!$listingContainer.is(":visible")) {
         $listingContainer.slideDown(250);
    }

    $record.animate({opacity:0}, 250);
    $record.replaceWith(record_html);
    $record.animate({opacity:0}, 250);
    //$record.fadeIn(1000);
}

更新

Aioros已发现问题:

$record.replaceWith(record_html);

是罪魁祸首。但为什么第二个动画也不起作用呢？如何替换 HTML 并使其保持淡色？

Answer 1

正如我在评论中所说，.replaceWith() 从 DOM 中删除 $record 元素，因此第二个 .animate() code> 没有可见的效果。您必须重新分配变量，或再次使用选择器。

function onEntityUpdateSuccess(record_html, statusText, jqXhr, jqForm) {
    var $record = $(".record#" + jqForm.find('input[name="id"]').val());
    var $listingContainer = $record.parents(".listingContainer");
    if(!$listingContainer.is(":visible")) {
         $listingContainer.slideDown(250);
    }

    $record.animate({opacity:0}, 250);
    $record.replaceWith(record_html);

    $record = $(".record#" + jqForm.find('input[name="id"]').val());
    /* or whatever the selector needs to be */

    $record.animate({opacity:0}, 250);
    //$record.fadeIn(1000);
}