使用jQuery重新排序和动画列表项？

Question

所以,我有一个项目列表,如:

<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或任何其他元素都可以.

Answer 1

好的,我已经做到了 - 它比我想象的要简单.

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);