如何用附加的HTML淡化div

Question

http://jsfiddle.net/leonwho/65bsS/25/

我有两个按钮，点击其中一个应该将它们淡出（它们的容器），然后将deleteXhtml变量附加到.delete_x_here隐藏的div并淡入删除按钮。

这似乎应该是直截了当的，也许我的DOM遍历搞砸了？

我在Chrome控制台中注意到了这一点：

HTML

<table>
<tr>
    <td class="incoming-actions">

        <div class="delete_x_here"></div>

        <div class="button_td">
            <div id="choice-accept-request" class="request-btn quick-accept"></div>
            <div id="choice-deny-request" class="request-btn quick-deny"></div>
        </div>

    </td>
</tr>

的jQuery

$('.request-btn').unbind('click').bind('click', function() {
    var $tr = $(this).closest("tr");
    var btnArea = $(this).closest('.incoming-actions');
    var btnAccept = $(this).closest('.incoming-actions #choice-accept-request');
    var btnDeny = $(this).closest('.incoming-actions #choice-deny-request');
    var deleteBox = $(this).closest(".incoming-actions .delete_x_here");
    var deleteXhtml = $('<div id="btn-delete-request" class="delete-x" title="Delete">X</div>');
    var btnBox = $(this).closest('.button_td');
    var user_choice = $(this).attr('id');

    if (user_choice === 'choice-accept-request') {

        console.log('choice-accept-request');

        // Disable Buttons here while waiting on Request
        $(btnAccept).css('cursor','auto');
        $(btnAccept).attr("disabled", "disabled");

        $(btnDeny).css('cursor','auto');
        $(btnDeny).attr("disabled", "disabled");

        //change buttons here
        $(btnBox).fadeOut('fast', function() {
            $(deleteXhtml).appendTo(deleteBox);
            $(deleteBox).fadeIn('fast');
            console.log('fade in delete button with appended deleteXhtml here');
        });

    }

});

Answer 1

问题是没有定义deleteBox。

使用此选项正确定义：

var deleteBox = $(this).parents(".incoming-actions").find(".delete_x_here");

JSFiddle

Answer 2

为了使其淡入，首先需要隐藏它。所以这可行。

$(deleteXhtml).appendTo(deleteBox).hide().fadeIn(1200);