8

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

您可以通过单击向上和向下文本链接来检查运动。

这是我的代码

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

演示

4

6 回答 6

19

只需添加隐藏和显示的序列，简单！

jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');
于 2015-05-19T01:00:46.233 回答
7

也许这样的事情可以帮助你：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样式。

于 2013-06-10T10:07:43.483 回答
2

用于.animate生成动画。

例如， 

$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});
于 2013-06-10T09:43:23.813 回答
2

我在这里遇到了同样的需求，为项目列表添加移动动画。我首先想使用 jqueryanimate来做到这一点。但是我使用tableandtr作为列表和列表项，我发现经过一些搜索后表格行不支持动画（您可以查看此链接以了解更多信息）。所以我设法使用其他解决方案。最后，我通过使用 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：演示

于 2018-11-02T09:13:02.460 回答
1

我希望这就是你要找的 -> DEMO

if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
$(this).parent().animate({
opacity: 0.1
}, 1500 );
于 2013-06-10T10:04:49.060 回答
1

这段代码对我来说是 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>
于 2019-08-15T11:48:18.030 回答