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