Question

我如何动画从一个列表移动到另一个列表，理想情况下使用Jquery动画？鉴于以下代码我知道我应该能够使用animate将listitem移动到它将在接收列表中占据的位置......但是如何获取坐标并将它们转换为css值？

＆＃13;

$('#list1').on('click', 'li', function() {
 // $(this).animate( ??? )
 $(this).appendTo($('#list2'));
})

$('#list2').on('click', 'li', function() {
 // $(this).animate( ??? )
 $(this).appendTo($('#list1'));
})

＆＃13;

ul {
  background-color: grey;
  color: black;
  padding: 10px;
  margin: 50px;
  width: 20%;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul id="list2">
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

＆＃13;

jsfiddle

Answer 1

这是星期六晚上（当地时间），我想帮助某人，我认真对待你的问题并提供了一个例子以及下面每一步的解释。

此示例中最重要的是使用绝对定位的list-element（在此示例中为#animatedList），以便此动画list-element不与其他元素交互。此外，要获得正确的坐标，您还必须考虑原始元素的边距/填充。

您必须单击按钮“运行代码段”才能执行此示例。希望这可以帮到你：

$('#list1').on('click', 'li', function() {
  var startElement = $(this);
  var endElement = $('#list2');
  startAnimation(startElement, endElement);
})

$('#list2').on('click', 'li', function() {
  var startElement = $(this);
  var endElement = $('#list1');
  startAnimation(startElement, endElement);
})

function startAnimation(startElement, endElement){
  var clickedListElement = startElement;
  // copy content of original element into animated list-element 
  var contentCopy = clickedListElement.text();
  var startCoords = getCoordsOfElement(clickedListElement);
  // if there are no li-elements anymore take the position of the whole list instead otherwise take last list-element
  var endCoords;
  if(endElement.find('li:last').length)endCoords = getCoordsOfElement(endElement.find('li:last'));
  else endCoords = getCoordsOfElement(endElement);
  // hide original element because the animated list-element will be shown 
  clickedListElement.css('visibility','hidden');
  showAnimation(contentCopy,startCoords,endCoords,function(){
   // the last step: copy the original element to it's destination and show it again because the animation is over
   clickedListElement.appendTo(endElement).css('visibility','visible');
  });
}

function getCoordsOfElement(element){
  var endCoords = element.offset();
  // because the margin and paddings of these lists distorts the calculated position you have to take them into consideration
  // and therefore we subtract them for top and left
  var marginOffsetTop = 50;
  endCoords.top -= marginOffsetTop;
  var marginOffsetLeft = 50;
  endCoords.left -= marginOffsetLeft;
  // the same happens with padding 
  var paddingOffsetTop = 10;
  endCoords.top -= paddingOffsetTop;
  var paddingOffsetLeft = 10;
  endCoords.left -= paddingOffsetLeft;
  return endCoords;
}

function showAnimation(contentCopy,startCoord,endCoord,callback){
 var list = $('#animatedList');
 // copy text of originel element into animated-list-element
 list.find('li').text(contentCopy);
 // set animated-list/element at the same position as the original clicked element
 list.css('top',startCoord.top+'px').css('left',startCoord.left+'px').show();
 list.animate({
   top: endCoord.top+'px',
   left: endCoord.left+'px'
 }, 1000, function(){
    // animation is finished here
    list.hide();
    callback();
 });
}

ul {
  background-color: grey;
  color: black;
  padding: 10px;
  margin: 50px;
  width: 20%;
  display: inline-block;
}

#animatedList{
  display:none;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<ul id="list2">
<li>four</li>
<li>five</li>
<li>six</li>
</ul>

<ul id="animatedList">
<li></li>
</ul>

动画附加到列表

1 个答案: