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()没有可见效果。您必须重新分配变量，或再次使用选择器。

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

Answer 2

您是否希望将不透明度设置为0？我要感谢fadeOut会将不透明度设置为0，但唉，这里有几个不同的选项。

$record.animate({opacity:0});
$record.fadeTo('slow', 0);

jQuery fadeOut将不透明度设置为1

2 个答案: