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

Answer 1

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

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

Answer 2

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.

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

Answer 4

Use .animate to generate the animation.

For instance,

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