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