如何为上下排序移动添加动画移动效果。
您可以通过单击向上和向下文本链接来检查移动。
这是我的代码
$(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());
});
});
【问题讨论】：
标签： jquery css jquery-ui insertafter
只需添加一系列隐藏和显示，简单！
jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');
【讨论】：
也许这样的事情可以帮助你：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());
});
});
}
});
});
这远非完美，您需要稍微清理一下代码，并在触发动画之前更好地测试元素的存在。
我还在span 样式中添加了position: relative;。
【讨论】：
position: relative; :: 快把我逼疯了！
使用.animate 生成动画。
例如，
$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});
【讨论】：
我在这里遇到了同样的需求，为项目列表添加移动动画。我首先想使用 jquery animate 来做到这一点。但是我使用table 和tr 作为列表和列表项，并且我发现经过一些搜索后表格行不支持动画（您可以查看this link 以了解更多信息）。所以我设法使用其他解决方案。最后，我通过使用 CSS3 转换和过渡实现了它。
代码如下：
/**
* @param {Object} $fstElem target item
* @param {Object} $scdElem swapped item
* @param {Number} dirflag move direction flag, 2 is up, 1 is down.
* @param {Function} cb callback
*/
function animatedMove($fstElem, $scdElem, dirflag, cb) {
var fstdir, scddir;
// move up
if (dirflag == 2) {
fstdir = '-';
scddir = '';
} else if(dirflag == 1){
// move down
fstdir = '';
scddir = '-';
}
// add animations
$fstElem.css({
transform: 'translateY('+fstdir+$scdElem.height()+'px)',
transition: 'transform 0.4s'
})
$scdElem.css({
transform: 'translateY('+scddir+$fstElem.height()+'px)',
transition: 'transform 0.4s'
})
// unset css3 properties and swap item, do some callbacks if you want
setTimeout(function(){
$fstElem.css({
transform: 'none',
transition: 'unset'
})
$scdElem.css({
transform: 'none',
transition: 'unset'
})
if (dirflag == 2) {
$fstElem.after($scdElem)
} else if(dirflag == 1){
$fstElem.before($scdElem)
}
cb && cb()
}, 400)
}
这里是 jsfiddle：DEMO
【讨论】：
cb（回调），它使用500 而不是400 的超时。应该使用此答案中的功能，而不是小提琴中的功能。 :) 谢谢！
我希望这就是你要找的 -> DEMO
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
$(this).parent().animate({
opacity: 0.1
}, 1500 );
【讨论】：
此代码 100% 对我有用。 码笔网址在这里https://codepen.io/dineshnisshanka/pen/KKPzXJB
<html>
<heade>
<style>
body {
margin: 0;
padding: 0;
}
.main_sec
{
display:inline-block;
width:100%;
max-width: 500px;
position: relative;
}
.main_sec .sections {
display:inline-block;
width:100%;
padding:5px;
position: relative;
z-index: 5;
box-sizing: border-box;
}
.main_sec .sections + .sections{
z-index: 10;
}
.main_sec .sections.sec_01 {
background-color: blueviolet;
}
.main_sec .sections.sec_02 {
background-color: royalblue;
}
.main_sec .sections span {
display:inline-block;
float:left;
}
.main_sec .sections a{
display:inline-block;
float:right;
cursor:pointer;
background-color:red;
padding:5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('as');
});
function swap_down()
{
//alert('asa');
var set_01 = $(".main_sec .sections.live").height() + 10;
var set_02 = $(".main_sec .sections:not(.live)").height() + 10;
console.log('set_01',set_01)
console.log('set_02',set_02)
$( ".main_sec .sections.live").animate({top: '-'+set_02+'px'}, 500);
$( ".main_sec .sections:not(.live)").animate({bottom:'-'+set_01+'px' }, 500, function(){
$( ".main_sec .sections:not(.live)" )
.insertAfter( $( ".main_sec .sections.live"));
$(".main_sec .sections:not(.live)").css("bottom","0");
$(".main_sec .sections.live").css("top","0");
$(".main_sec .sections").toggleClass('live');
$(".main_sec .sections").removeAttr("style");
});
$( ".main_sec .sections.live").removeClass('live');
$( ".main_sec .sections+.sections").addClass('live');
//$( ".main_sec .sections.live").animate({top: '0px'}, 500);
//$( ".main_sec .sections:not(.live)").animate({bottom: '0px'}, 500);
}
</script>
</heade>
<body>
<div class="main_sec">
<div class="sections sec_01 " ><span>section 01</span> <a class="move-down" onclick="swap_down();" >swaping 01</a> </div>
<div class="sections sec_02 live" ><span>section 02</span> <a class="move-down" onclick="swap_down();">swaping 02</a>
<br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut </div>
</div>
</body>
</html>
【讨论】：