Add sliding animation to jquery insertafter and insertbefore

Question

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

Clite

Answer 1

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.

Surcease

(+)1 for position: relative; :: was driving me nuts! – Impugn

Answer 2

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

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

Bisayas

Answer 3

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

Concerning

Keep in mind that the jsfiddle does not have the cb (callback) in the function parameters, and it uses a timeout of 500 rather than 400. The function in this answer should be used, not the one in the fiddle. :) Thank you! – Gloriole

Answer 4

Use .animate to generate the animation.

For instance,

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

Crowboot

Answer 5

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

Carnage

Answer 6

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>

Vermination