所以,我有一个项目列表,如：
<ul id="listHolder">
<li id="l1">List item 1</li>
<li id="l2">List item 2</li>
<li id="l3">List item 3</li>
等等
ajax调用被定期触发,我可能需要重新排序列表(通过使一个较低的项目成为列表中的第一个).这很容易通过更改#listHolder的HTML来实现,但是我想要动画化,所以适当的项目将页面向上移动到正确的位置,而其他的向下移动.
我不知道从哪里开始= /
NB.它不一定是一个列表：一个div或任何其他元素将是罚款.
解决方法
好的,我已经做了 – 这比我想像的要简单.
http://jsfiddle.net/Vyhph/
请注意,如果您在一秒钟内单击多个列表对象,则会出错.你可以很容易地停止这个,但对我来说这不是一个问题.
$("li").live("click",function() {
var $myLi = $(this);
var $myUl = $(this).parent();
var listHeight = $myUl.innerHeight();
var elemHeight = $myLi.height();
var elemTop = $myLi.position().top;
var moveUp = listHeight - (listHeight - elemTop);
var moveDown = elemHeight;
var liId = $myLi.attr("id");
var enough = false;
var liHtml = $myLi.outerHTML();
$("li").each(function() {
if ($(this).attr("id") == liId) {
return false;
}
$(this).animate({
"top": '+=' + moveDown
},1000);
});
$myLi.animate({
"top": '-=' + moveUp
},1000,function() {
$myLi.remove();
var oldHtml = $myUl.html();
$myUl.html(liHtml + oldHtml);
$myUl.children("li").attr("style","");
});
});
(function($) {
$.fn.outerHTML = function() {
return $(this).clone().wrap('<div></div>').parent().html();
}
})(jQuery);