将滑动动画添加到jquery insertafter和insertbefore

Question

如何为上下排序运动添加动画移动效果.

您可以通过单击向上和向下文本链接来检查移动.

这是我的代码

$(document).ready(function(){
    $('.move-up').click(function(){
        if ($(this).prev())
            $(this).parent().insertBefore($(this).parent().prev());
    });
    $('.move-down').click(function(){
        if ($(this).next())
            $(this).parent().insertAfter($(this).parent().next());
    });
});

DEMO

Answer 1

只需添加一系列隐藏和显示,轻松!

jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');

Answer 2

也许这样的事情可以帮到你: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());
                });
            });
        }
    });
});

它远非完美,你需要稍微清理一下代码并在开始动画之前和之后测试一个元素的存在.

我也加入position: relative;了span风格.