如何为上下排序运动添加动画效果。
您可以通过点击“向上”和“向下”文本链接来检查运动。
这是我的代码
$(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(html_usr).insertBefore( "#log_row" ).hide().show('slow');
$(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;。
animate来实现。但是我使用的是table和tr作为列表和列表项，经过一些搜索后发现表格行不支持动画（您可以查看此链接了解更多信息）。所以我设法使用其他解决方案。最终，我通过使用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：演示
cb（回调），并且它使用了500而不是400的超时。应该使用此答案中的函数，而不是fiddle中的函数。 :) 谢谢！ - Deadpikle使用.animate生成动画效果。
例如，
$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
$(this).parent().animate({
opacity: 0.1
}, 1500 );
<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>
position: relative;:: 真的让我抓狂！ - JoeBrockhaus