jquery - jQuery prependTo上的CSS动画在同一div中

我需要一个CSS规则（或jQuery绑定？）来设置此类事件的动画：

    $("#column").children().eq(-1).prependTo("#column")

我正在寻找的是“滑动”规则。

JSFiddle：http://jsfiddle.net/rkdLkjg8/3/

谢谢。

最佳答案

我想这就是你所期望的

http://codepen.io/moorthyrweb/pen/pvdppO

$("#button-action").on('click', moveBottomToTop);

var busy = false;

function moveBottomToTop() {
  if(busy) return;
  busy = true;
  //collect data
  var $column = $("#column"),
      $lastChild = $column.find(":last-child"),
      lastChildPos = $lastChild.position();

  //prepare
  $lastChild.prependTo($column).css({
     position: "absolute",
     top: lastChildPos.top,
     zIndex: 99
  });

  //animate
  $lastChild.animate({
    top: 0
  }, function(){
    //settle
    $lastChild.css({
      position: "",
      zIndex: ""
    })
    busy = false;
  })

}