Add sliding animation to jquery insertafter and insertbefore

◇◆丶佛笑我妖孽 提交于 2019-12-19 19:44:55

问题


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


回答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.




回答2:


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

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



回答3:


Use .animate to generate the animation.

For instance,

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



回答4:


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



回答5:


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




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


来源:https://stackoverflow.com/questions/17020758/add-sliding-animation-to-jquery-insertafter-and-insertbefore

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!