如何淡入DIV與附加HTML

Question

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

我有2個按鈕，點擊任一應淡出他們兩個（它們的容器），然後追加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);