如何用原生JS、jQuery或CSS实现HTML元素上下换位的动画效果

方案1：jQuery 内置动画实现（最小代码改动） #

无需新增CSS，仅调整JS的移动逻辑即可，通过滑动+透明度动画弱化突兀感：

function moveUp(rowId) {
  var myRow = $("#" + rowId).closest(".item-row");
  var prev = myRow.prev(".item-row");
  if (myRow.attr("id") != $(".item-row:first").attr("id")) {
    // 300ms为动画时长，可自行调整
    myRow.fadeTo(200, 0.5).slideUp(300, function() {
      // insertBefore会自动移动元素，无需手动remove
      myRow.insertBefore(prev).slideDown(300).fadeTo(200, 1);
    });
  }
}

function moveDown(rowId) {
  var myRow = $("#" + rowId).closest(".item-row");
  var next = myRow.next(".item-row");
  if (myRow.attr("id") != $(".item-row:last").attr("id")) {
    myRow.fadeTo(200, 0.5).slideUp(300, function() {
      myRow.insertAfter(next).slideDown(300).fadeTo(200, 1);
    });
  }
}

方案2：CSS 过渡实现（性能更优，动画更流畅） #

利用CSS过渡走GPU渲染，比纯JS动画更顺滑，尤其适合移动端场景：
首先给CSS新增以下样式：

.item-row {
  /* 原有样式保留，新增以下属性 */
  transition: all 0.3s ease;
}
.item-row.moving {
  opacity: 0.4;
  transform: scale(0.98);
}

然后修改JS逻辑：

function moveUp(rowId) {
  var myRow = $("#" + rowId).closest(".item-row");
  var prev = myRow.prev(".item-row");
  if (myRow.attr("id") != $(".item-row:first").attr("id")) {
    myRow.addClass("moving");
    setTimeout(() => {
      myRow.insertBefore(prev).removeClass("moving");
    }, 150);
  }
}

function moveDown(rowId) {
  var myRow = $("#" + rowId).closest(".item-row");
  var next = myRow.next(".item-row");
  if (myRow.attr("id") != $(".item-row:last").attr("id")) {
    myRow.addClass("moving");
    setTimeout(() => {
      myRow.insertAfter(next).removeClass("moving");
    }, 150);
  }
}

你可以根据自己的喜好调整动画时长、透明度、缩放等参数，匹配整体页面风格。

内容的提问来源于stack exchange，提问作者JakeMc