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

为项目列表项添加上下移动动画。首先想使用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为表格行添加上下移动画效果

上一篇:ios和android的时间格式的差异


下一篇:一个程序员的六年反思,我为什么选择快速开发