将项目放在动画和 inserbefore 函数混乱之后

Place items right after the animation and inserbefore function mess

本文关键字：inserbefore 函数 混乱 之后 动画 项目      更新时间：2023-09-26

这是我的小提琴

我有一个动画，必须重新排列列表中的项目，我们在左侧的幻灯片上单击并变为活动状态，右侧的活动元素幻灯片和活动类从中删除。但是，我在插入之前函数有一些问题。即使动画做对了，它也会把一切都搞砸。我试图弄清楚如何让一切看起来都到位这是我的脚本，但您可以使用小提琴

$(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');
            });

    });
}

我不确定它应该如何重新排列项目。 但一种方法是这样的。

http://jsfiddle.net/7o6uuf0f/

对 done 函数中的代码进行微小更改

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

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

相关文章：