所以,我有一个项目列表,例如:
<ul id="listHolder">
<li id="l1">List item 1</li>
<li id="l2">List item 2</li>
<li id="l3">List item 3</li>
ETC。
定期触发 ajax 调用,我可能需要重新排序列表(通过使较低的项目之一成为列表中的第一个项目)。只需更改 #listHolder 的 HTML 即可轻松完成,但我想对其进行动画处理,以便适当的项目在页面上移动到正确的位置,而其他项目则向下移动。
我不知道从哪里开始=/
注意。它不一定是一个列表:一个 div 或任何其他元素都可以。
好吧,我已经做到了——比我想象的要简单。
http://jsfiddle.net/Vyhph/ 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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)