jQuery : 요소 위로 밀어 넣기 및 바꾸기

Question

jQuery를 사용하여 요소를 클릭하면 위로 올라가고 새 요소가 만들어져 그 위치로 내려갑니다. 그러나 그것은 아래로 미끄러지지 않도록,

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

내가 요소를 클릭 http://jsfiddle.net/V4SVt/474/, 그것은 완벽하게 밖으로 슬라이드, 새로운 요소가 생성됩니다

내 코드는 여기에있다. 그냥 나타납니다. 요소를 숨긴 다음 WebKit 콘솔을 통해 아래로 슬라이드하면 올바르게 움직입니다. 여기서 뭐가 잘못 됐니?

Answer 1

인라인 요소를 슬라이딩 할 때 특히 동적으로 삽입되고 위치, 크기 또는 다른 것이없는 경우 문제가 있습니다.

이 시도 : assGrab에 대한

$('.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