javascript - 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 コンソールを介して下にスライドすると、正しくアニメーション化されます。ここで何が問題なのですか？