javascript - 在动画之后立即放置元素并在函数困惑之前插入

Question

Here is my fiddle

我有一个动画，它必须重新排列列表中的元素，我们点击左侧的幻灯片并变为事件状态，事件元素在右侧滑动，事件类从中删除。但是，我对 insertBefore 函数有一些问题。即使动画效果不错，它也会把一切都搞砸。我想弄清楚如何让一切看起来都到位这是我的脚本，但你可以使用 fiddle

$(document).ready(function(){
   console.log("it started");
   swapsies();



});
function swapsies()
{
    $('.lang').on('click', function() {
       // console.log("here");
        //.when(
        var $dist = 27;
        var $diststr="+="+$dist;
        var $diststr2="-="+$dist*2
        var $clicked=$(this);

        var $mcb= $clicked.css('margin-left');
        var $mnb=$clicked.css('margin-left');

        var $mab=$('.active').css('margin-left');

        $.when(
            $(this).animate({ "margin-left": $diststr2 }, 500),
            $(this).next().animate({ "margin-left": $diststr }, 500),
            $('.active').animate({ "margin-left": $diststr }, 500)
        ).done(function(){
                $clicked.insertBefore('.active');
                $(this).css('margin-left', "-54")
                $(this).next().css('margin-left', "27");
                $('.active').css('margin-left', "27");
                $('.active').removeClass('active');
                $clicked.addClass('active');
            });



    });
}

Answer 1

我不确定应该如何重新排列元素。但一种方法是这样。

http://jsfiddle.net/7o6uuf0f/

对已完成函数中的代码进行微小更改

$clicked.insertBefore('.active');
$("#swapthis li").css("margin-left", "0");
$('.active').removeClass('active');
$clicked.addClass('active');

但是您也可以考虑不重新发明轮子，而是使用它。 http://jqueryui.com/sortable/#display-grid