jquery - 动画元素从一个列表移动到另一个

Question

我有两个这样的列表:

<ul id="list1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="list2">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

我想单击列表 1 中的一个元素，让未单击的元素从屏幕左侧滑出，然后将单击的元素附加到列表 2 的底部。虽然它只是突然出现，但我希望它从列表 1 滑动到列表 2。非动画版本在 JQuery 中看起来像这样:

$(document).ready(function() {
  $("#list1 li").click(function() {
    chosenItem = this;
    $("#list1 li").each(function(index, element) {
      if (element != chosenItem) {
        $(element).hide();
      }
    });

    $(chosenItem).appendTo("#list2")

  })
});

我尝试了多种不同的动画方式，但似乎列表项不受我尝试的与位置有关的任何事情的影响。完成此类动画的最佳方法是什么？

http://jsfiddle.net/qvd3Lcf7/12/

Answer 1

也许你可以使用 transfrom:translateX() 和 translateY() 来制作动画，尽管我怀疑它会很挑剔而且没有那么吸引人......也许使用不透明度淡化可以实现同样易于交流且相当简单的东西？例如:

$(document).ready(function() {
  $("#list1 li").click(function() {
    chosenItem = this;
    $("#list1 li").each(function(index, element) {
      if (element != chosenItem) {
        $(element).animate({opacity:0, marginLeft:"-=10px", marginRight: "+=10px"}, 500);
      }
    });

    $(chosenItem).animate({opacity:0}, 600, function() {
   		$(chosenItem).appendTo("#list2").animate({opacity:1}, 500);
    });

  })
});

#list1 {
  display: inline-block;
}

#list2 {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="list2">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

我只是让未选中的元素在淡出时向左滑动，而选中的元素在相同位置淡出，然后在新位置淡入。如果您必须有一个翻译解决方案，那么我相信这是可能的，但可能需要一些使用绝对定位的工作。看看这里的答案:

JQuery - animate moving DOM element to new parent?