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

如何在上下排序运动中添加动画移动效果。

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

这是我的代码

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

也许这样的事情可以帮到你： 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风格。

Answer 2

只需添加一系列隐藏和显示，轻松！

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

Answer 3

使用.animate生成动画。

例如，

 $(this).parent().insertBefore($(this).parent().prev()).animate({..}); $(this).parent().insertBefore($(this).parent().next()).animate({..}); 

Answer 4

我希望这就是你要找的 – > DEMO

 if ($(this).prev()) $(this).parent().insertBefore($(this).parent().prev()); $(this).parent().animate({ opacity: 0.1 }, 1500 );