jQuery的動畫包裝VS追加

Question

我有以下的jQuery：

 var container = $(this), 
      list = container.children('ul'), 
      wrapper = $('<div class="wrapper"></div>'); 

     list.wrap(wrapper); 

     var top = 0 - list.height(); 
     wrapper.animate({ 'top': top + "px" }, options.animationSpeed, function() { 
     }); 

但這並不動畫包裝，但是，而是如果我用下面的.wrap

 container.append(wrapper.append(list)); 

動畫將工作。

爲什麼第二個版本可以工作，但第一個版本沒有？

Answer 1

這是因爲wrapper的標記被複制到DOM中，並且該列表被追加到副本，而不是保留在DOM之外的原始wrapper對象。

明確提到列表的新家長應解決您的問題：

list.parent().animate({ 
    top: top + "px" 
}, options.animationSpeed, function() { 
});