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?

动画从一个列表移动到另一个列表的项目

1 个答案: