Question

如何为上下排序动作添加动画移动效果。

您可以点击向上和向下文字链接来检查移动。

这是我的代码

$(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());
    });
});

DEMO

Answer 1

只需添加一系列隐藏和显示，轻松！

jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');

Answer 2

也许这样的事情可以帮到你：http://jsfiddle.net/eJk3R/38/

$(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());
                });
            });
        }
    });
});

这远非完美，你需要稍微清理一下代码并在开始动画之前和之后测试一个元素的存在。

我还将position: relative;添加到span样式。

Answer 3

使用.animate生成动画。

例如，

$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});

Answer 4

我希望这就是你要找的 - ＆gt;的 DEMO

if ($(this).prev()) $(this).parent().insertBefore($(this).parent().prev()); $(this).parent().animate({ opacity: 0.1 }, 1500 );

Answer 5

此代码对我来说100％有效。代码笔网址位于https://codepen.io/dineshnisshanka/pen/KKPzXJB

 <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>

Answer 6

我在这里满足了相同的要求，为项目列表添加了移动动画。我首先要使用jquery animate来做到这一点。但是我将table和tr用作列表和列表项，并且我发现经过一些搜索后表格行不支持动画（您可以检查this link来了解更多信息）。因此，我设法使用其他解决方案。最后，我通过使用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： DEMO

将滑动动画添加到jquery insertafter和insertbefore

6 个答案: