将滑动动画添加到jquery insertafter和insertbefore [英] Add sliding animation to jquery insertafter and insertbefore
本文介绍了将滑动动画添加到jquery insertafter和insertbefore的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将动画移动效果添加到向上和向下排序移动。
How to add animation moving effect to up and down sort movement.
您可以通过单击向上和向下文本链接来检查移动。 / strong>
You can check the movement by clicking on the UP and DOWN text links.
以下是我的代码
$(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
推荐答案
也许这样可能会帮助你: http://jsfiddle.net/eJk3R/38/
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.
我还添加了 position:relative;
到一个元素之前和之后 span
样式。
I also added position: relative;
to the span
style.
这篇关于将滑动动画添加到jquery insertafter和insertbefore的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文