jQuery的 - 結合克隆的內容和淡入

Question

我試圖實現這一結果：

特點：

1. 工具提示即時顯示，上點擊。
2. 淡入和位置動畫開始於同一時間，然後，仍然而動畫位置時，所述元件淡出。在一次（在情況下，兩個或更多個按鈕接連單擊不久一個）
3. 消息內容從動態JSON對象採取
4. 若干工具提示可以是可見的。

我能夠複製和的onclick顯示工具提示，但由於某種原因無法制作動畫，或替換它的內容。

我不明白我該如何選擇新的重複元素。

參見實施例誤差的下方，或jsFiddle。

HTML：

<div id="ptsAlert"> 
    <span class="ptsAlert"> 
     message 
     <div class="ptsAlert-arrow"></div> 
    </span> 
</div> 

<table> 
    <tr> 
     <td class="btn">01</td> 
     <td class="btn">02</td> 
     <td class="btn">03</td> 
    </tr> 
    <tr> 
     <td class="btn">04</td> 
     <td class="btn">05</td> 
     <td class="btn">06</td> 
    </tr> 
</table> 

CSS：

h1 { 
    font-size:50px; 
    margin:10px; 
} 
body { 
    text-align:center; 
} 
td { 
    border: 1px solid; 
    padding: 5px; 
    cursor: pointer; 
} 

.ptsAlert { 
    display:none; 
    background-color: #EE0000; 
    color: #FFFFFF; 
    font-size: 27px; 
    font-weight: bold; 
    line-height: 1.7em; 
    margin: 10px auto; 
    padding: 0 10px; 
    position: absolute; 
    text-align: center; 
} 

.ptsAlert-arrow{ 
    border-color: #EE0000 transparent transparent; 
    border-style: solid; 
    border-width: 8px; 
    bottom: -15px; 
    height: 0; 
    left: 3px; 
    position: absolute; 
    width: 0; 
} 

的jQuery：

//Function to show points alerts 
$('.btn').click(function(event) { 
    var points = 10; 
     $('#ptsAlert').clone(true, true).contents() 
      .appendTo('body') 
      .css('top', (event.pageY - 75) + 'px') 
      .css('left', (event.pageX - 10) + 'px') 
      .css('display', 'inline-block') 
      //.hide().fadeIn(); 
}); 

的註釋行.hide().fadeIn()產生以下錯誤：

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle] 

Answer 1

//Function to show points alerts 
$('.btn').click(function(event) { 

     $('#ptsAlert').find("> span").clone(true, true) 
      .css('top', (event.pageY - 75) + 'px') 
      .css('left', (event.pageX - 10) + 'px') 
      .css('display', 'inline-block') 
      .appendTo($('body')) 
      .hide().fadeIn(); //this line doesn't break the code (anymore) 
}); 

優化

var $body=$(document.body); 
    var $ps=$("#ptsAlert"); 
    var $tltp = $ps.find(">span"); 
    $body.on("click",".btn",function(event) { 
     $tltp.clone(true, true) 
      .css('top', (event.pageY - 75) + 'px') 
      .css('left', (event.pageX - 10) + 'px') 
      .css('display', 'inline-block') 
      .appendTo($body) 
      .hide().fadeIn(); 
     });