jQuery：向上滑動一個元素並替換它

Question

我正在嘗試使用jQuery來使它當我點擊一個元素時，它向上滑動，並創建一個新的元素，它可以滑入它的位置。

我的代碼是在這裏：http://jsfiddle.net/V4SVt/474/

$('.grab_button').click(function() { 
    $(this).slideUp(function() { 
     $(this).parent().append($('<span class=" grabbed">grabbed</span>').hide()); 
     $(this).parent().children('.grabbed').slideDown(); 
     $(this).remove(); 
    }); 
}); 

當我點擊的元素，它滑出完美，並創建新的元素，但它不會滑下。它剛剛出現。如果我然後隱藏該元素，然後通過WebKit控制檯將其滑下，它就會正確地進行動畫。這裏有什麼問題？

Answer 1

滑動內聯元素存在問題，特別是如果它們是動態插入的並且沒有位置，大小或其他任何內容。

試試這個：

$('.grab_button').click(function() { 
    var assGrab = $('<span />', {'class':'grabbed', text:'grabbed', style:'display:inline-block;'}); 
    $(this).slideUp(function() { 
     $(this).replaceWith(assGrab.hide()); 
     assGrab.slideDown() 
    }); 
}); 

FIDDLE