javascript - 任意定位显示的动画移动 :inline elements into a position:relative final position

Question

HTML 代码由一个 div 组成，它具有两种类型的类:“隐藏”和“保留”。

<div>
    <span class"hide">Lorem ipsum dolor sit amet, </span>
    <span class="keep">consectetur</span>
    <span class"hide"> adipisicing elit, sed do </span>
    <span class="keep">eiusmod</span>
</div>

JQuery 代码已到位，它选择带有类 hide 的跨度，以便它们可以淡出，只留下类“保持”在 div 中可见的跨度。:

last.children("span.hide").fadeOut();

问题:如何为“keep”跨度从文本中的原始位置到最终可见位置的移动设置动画？

只要能识别出每个span的起始位置和结束位置，动画代码就不难写了。挑战(我怀疑)是在隐藏“隐藏”类跨度后确定每个跨度的最终位置。请注意，尽管有我的示例代码，但在 div 中有任意数量的“隐藏”和“保留”跨度，每个跨度都具有任意大的内容。

注意:使用了 JQuery 1.6+。

---

奖励问题:在“隐藏”中淡出后，如何为“保持”跨度返回到它们的原始位置的运动设置动画“跨度？

Answer 1

这是我未经检验的原始想法:

1. 获取“keep”元素的位置。
2. 使用 display: none 隐藏“hide”元素。
3. 获取“keep”元素的新位置。
4. 再次显示“隐藏”元素。
5. 使用 visibility: hidden 隐藏“隐藏”元素(因此它们在布局中保留它们的位置)
6. 为“keep”元素相对于其正常位置的位置设置动画。

因为您在不屈服的情况下完成所有这些操作，所以用户应该只看到动画 ( live example ):

var hide, keep, deltas;

hide = $(".hide");
keep = $(".keep");

// Get current positions
deltas = [];
keep.each(function(index) {
  deltas[index] = $(this).offset();
});

// Hide and query new position
hide.hide();
keep.each(function(index) {
  var pos = $(this).offset();
  deltas[index].left -= pos.left;
  deltas[index].top  -= pos.top;
});

// Show again, hide whilst keeping space, then animate
hide.show().css("visibility", "hidden");
keep.each(function(index) {
  $(this).animate({
    left: -deltas[index].left,
    top:  -deltas[index].top
  });
});

这完全没有优化，您可能想在所有动画完成后做一些事情，但这只是一个开始，Live Copy 确实有效。

关于奖励问题:这部分很简单，只需动画回到left: 0px/top: 0px。

这是一个带有切换的版本，并添加了淡入淡出(live copy):

var hide, keep, deltas;

// Get the spans
hide = $(".hide");
keep = $(".keep");

// Showing or hiding?
showing = !showing;
if (showing) {
  // Showing, this is easy
  hide.css("visibility", "").hide().fadeIn();
  keep.animate({
    left: 0,
    top:  0
  });
}
else {
  // Hiding -- get current positions
  deltas = [];
  keep.each(function(index) {
    deltas[index] = $(this).offset();
  });

  // Hide and query new position
  hide.hide();
  keep.each(function(index) {
    var pos = $(this).offset();
    deltas[index].left -= pos.left;
    deltas[index].top  -= pos.top;
  });

  // Show again, hide whilst keeping space, then animate
  hide.show().fadeOut(function() {
    $(this).show().css("visibility", "hidden");
  });
  keep.each(function(index) {
    $(this).animate({
      left: -deltas[index].left,
      top:  -deltas[index].top
    });
  });
}

more text 更有趣.