同一div中jQuery prependTo上的CSS动画

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

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

我要找的是一个“幻灯片”规则

JSFiddle：

---

谢谢。

您可以通过两个类的帮助来实现这一点，这两个类将触发转换效果。Javascript应该在动画之后添加和删除它们

$（“#按钮操作”）。在（'click'，函数（）{
var$row=$（“#列”）.children（）.eq（-1）；
$row.addClass（'slide-start'）.prependTo（“#column”）；
setTimeout（函数（）{
$row.addClass（'slide-active'）；
setTimeout（函数（）{
$row.removeClass（'slide-start-slide-active'）；
}, 500);
}, 0);
})

#列{
宽度：400px；
高度：330px；
背景：#EEE；
溢出：隐藏；
}
.行{
宽度：400px；
高度：100px；
背景色：#44B846；
边缘底部：10px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：100px；
}
.row.slide-start{
利润上限：-110px；
过渡：边缘顶部。5s轻松；
}
.row.slide-active{
页边顶部：继承；
}

自下而上

第1行
第2排
第3排

我想这就是你所期望的

试一试

JSFIDLE

$（“按钮操作”）
.on（'单击'，函数（）{
$（“#列div:eq（-1）”）
.slideUp（函数（）{
$（本）
.prependTo（$（this.parent（））
.slideDown（）
})
});
#列{
宽度：400px；
高度：330px；
}
.行{
宽度：400px；
高度：100px；
背景色：#44B846；
边缘底部：10px；
文本对齐：居中；
垂直对齐：中间对齐；
线高：100px；
}

自下而上

第1行
第2排
第3排
谢谢您的回答@dfsq，但我要找的不是动画：我想证明行的来源和目的地，因此动画应该在移动中携带行。
$("#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;
  })

}

$("#button-action")
.on('click', function () {
    $("#column div:eq(-1)")
    .slideUp(function () {
        $(this)
        .prependTo($(this).parent())
        .slideDown()
    })
});