使用动画垂直移动 div/blocks

Question

如果我有 div/块

<ul class="list-group">
      <li class="list-group-item clearfix">List Item 1  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 2 <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 3  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 4  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 5  <button class="btn btn-default animate pull-right">Animate</button></li>
    </ul>

单击按钮我想用动画重新排序元素，比如 clicked/selected 元素在顶部

列出项目 5
列表项目 1
列表项目 2
列出项目 3
列出项目 4

在另一个项目的 select 上，它必须紧挨着已移动的项目

列出项目 5
列出项目 3
列表项目 1
列出项目 2
列出项目 4

我们怎样才能做到这一点

Example Plunker

但这并没有完美地移动到它的位置。注意：元素应仅在单击时移动。不支持拖放

Answer 1

在这个例子中，当你点击一个按钮时，列表项移动到列表的顶部。因为它使用 live 函数，所以它只适用于 jQuery 小于 1.9 的版本。

$("li").live("click", function() {
    var selectedItem = $(this).closest("li");
    var listHeight = $("ul").innerHeight();
    var elemHeight = selectedItem.height();
    var elemTop = selectedItem.position().top;
    var moveUp = listHeight - (listHeight - elemTop);
    var moveDown = elemHeight;
    var listNum = selectedItem.attr("id");
    var listHtml = selectedItem.outerHTML();

    $("li").each(function() {
        if ($(this).attr("id") == listNum) {
            return false;
        }
        $(this).animate( { "top": '+=' + moveDown }, 1000);
    });

    selectedItem.animate( { "top": '-=' + moveUp }, 1000, function() {
        $(this).remove();
        $("ul").html(listHtml + $("ul").html());
        $("li").attr("style", "");
    });
});

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);

http://jsfiddle.net/zdhzefu5/1

使用动画垂直移动 div/blocks

Move div/blocks vertically with animations

css

jquery

css-transitions

twitter-bootstrap