Add sliding animation to jquery insertafter and insertbefore
just add the a sequence of hide and show, easy!
jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');
Maybe something like this could help you : http://jsfiddle.net/eJk3R/38/
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev()){
var t = $(this);
t.parent().animate({top: '-20px'}, 500, function(){
t.parent().prev().animate({top: '20px'}, 500, function(){
t.parent().css('top', '0px');
t.parent().prev().css('top', '0px');
t.parent().insertBefore(t.parent().prev());
});
});
}
});
$('.move-down').click(function(){
if ($(this).next()){
var t = $(this);
t.parent().animate({top: '20px'}, 500, function(){
t.parent().next().animate({top: '-20px'}, 500, function(){
t.parent().css('top', '0px');
t.parent().next().css('top', '0px');
t.parent().insertAfter(t.parent().next());
});
});
}
});
});
It's far from perfect, you'll need to clean up the code a little bit and test the presence of an element before and after a little better before fireing the animation.
I also added position: relative;
to the span
style.
Use .animate
to generate the animation.
For instance,
$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});