码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-11-09 13:12:36      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:@param   not   其他   重置   edm   query   target   set   移动   

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

标签:@param   not   其他   重置   edm   query   target   set   移动   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!