jquery 动画，移动除了上下左右，别的方向怎么移动呀

Posted 2023-05-13

RT

1、首先新建一个html文件，命名为test.html，在test.html文件内，使用div标签创建一个模块，并设置其class属性为content，主要用于下面通过该class获得div对象。

2、在test.html文件内，使用css设置div的样式，定义div的宽度和高度为80px，背景颜色为红色，位置属性为relative（相对定位）。

3、在test.html文件内，使用button标签创建一个按钮，按钮名称为“移动位置”。

4、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行yidong（）函数。

5、在js标签中，创建yidong()函数，在函数内，通过class(content)获得div对象，使用animate()方法让div在1秒内向左移动100px。

6、最后在浏览器打开test.html文件，点击按钮，查看实现的效果。

参考技术A 同时改变left和top就可以了啊本回答被提问者采纳 参考技术B 运动都是通过修改left,top,right,bottom,的值实现的，别的方向，如左上，就让left和top的值减小.

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