首页 > 移动平台 > 详细

jquery为表格行添加上下移动画效果

时间:2018-11-09 13:05:48      阅读:173      评论:0      收藏:0      [点我收藏+]
为项目列表项添加上下移动动画。首先想使用jquery animate来做到这一点。
但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations are not supported on table rows.)。
所以设法用其他解决方案。最后使用jq方法配合 CSS3 transform 实现。

/** * @param {Object} $fstElem 目标行 * @param {Object} $scdElem 被换行 * @param {Number} dirflag 移动方向 flag, 2 是上移, 1 是下移. * @param {Function} cb 回调 */ 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‘ }) // 重置css3样式; 触发回调函数 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

jquery为表格行添加上下移动画效果

原文:https://www.cnblogs.com/skura23/p/9934454.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!