javascript - 使用 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 即可轻松做到这一点，但我想对其进行动画处理，以便适当的项目在页面上移动到正确的位置，而其他项目则向下移动。

我不知道从哪里开始=/

注意。它不一定是列表: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);