Add sliding animation to jquery insertafter and in

2020-04-06 15:31发布

How to add animation moving effect to up and down sort movement.

You can check the movement by clicking on the UP and DOWN text links.

Here is my code

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

6条回答
Melony?
2楼-- · 2020-04-06 16:12

Maybe something like this could help you : 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());
                });
            });
        }
    });
});

It's far from perfect, you'll need to clean up the code a little bit and test the presence of an element before and after a little better before fireing the animation.

I also added position: relative; to the span style.

查看更多
Root(大扎)
3楼-- · 2020-04-06 16:15

just add the a sequence of hide and show, easy!

jQuery(html_usr).insertBefore( "#log_row" ).hide().show('slow');
查看更多
Melony?
4楼-- · 2020-04-06 16:15

I met the same demand here, to add move animation for item list. I first want to use jquery animate to do this. But I'm using table and tr as list and list item, and I find animations are not supported on table rows after some search (You can check this link to read more about this). So I managed to use other solutions. Finally I made it out by using CSS3 transform and transition.

Here is the code:

/**
 * @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)
}

Here is jsfiddle: DEMO

查看更多
别忘想泡老子
5楼-- · 2020-04-06 16:15

This code was work for me 100%. The code pen url here 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>
查看更多
Melony?
6楼-- · 2020-04-06 16:17

Use .animate to generate the animation.

For instance,

$(this).parent().insertBefore($(this).parent().prev()).animate({..});
$(this).parent().insertBefore($(this).parent().next()).animate({..});
查看更多
\"骚年 ilove
7楼-- · 2020-04-06 16:22

I hope this is what you are looking for -> DEMO

if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
$(this).parent().animate({
opacity: 0.1
}, 1500 );
查看更多
登录 后发表回答