Question

HTML代码由一个包含两种类型的div的div组成：“hide”和“keep”。

<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代码选择具有类隐藏的跨度，以便它们可以淡出，只留下div中“keep”类的跨度。：

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

问题：如何设置“保持”范围从文本中原始位置移动到最终可见位置的动画？

只要可以识别每个跨度的初始位置和最终位置，动画代码就不是写入的挑战。挑战（我怀疑）是在隐藏“隐藏”类跨度后确定每个跨度的最终位置。请注意，尽管我的示例代码，div中存在任意数量的“隐藏”和“保持”跨度，每个跨度具有任意大的内容。

注意：使用JQuery 1.6+。

加分问题：在隐藏“隐藏”后，如何动画“保持”范围返回到原始位置的移动“跨度？

Answer 1

这是我原始的，大多未经考验的想法：

获取“保持”元素的位置。
使用display: none隐藏“隐藏”元素。
获取“保持”元素的新职位。
再次显示“隐藏”元素。
使用visibility: hidden隐藏“隐藏”元素（以便它们在布局中保留其位置）
动画“保持”元素相对于其正常位置的位置。

因为你在不屈服的情况下完成所有这些操作，用户应该只看到动画（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
  });
});

这完全没有优化，你可能想在所有动画完成时做点什么，但这是一个开始，而实时副本确实有用。

重新提出红利问题：该部分很简单，只需animate返回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更有趣。

Answer 2

我认为最好的方法是在隐藏它们之前遍历每个隐藏跨度并获取下一个元素（“keep”）元素并将其存储在变量中。然后你需要将它设置为绝对位置，它的顶部和左侧位置设置为你刚刚获得的位置。此时，您还需要获取并存储“hide”元素的位置，并使用存储的变量为fadeOut和“保持”位置移动到“隐藏”位置。

Answer 3

简单的起点。添加JqueryUI以获得更多效果

$(document).ready(function() {
  $("span:last.hide").fadeOut(function(){
    $("span.keep").animate({paddingLeft:"+=5px",opacity:".5"});
  });
});

你也可以给CSS3：转换！可以像这样创建一些惊人的效果

任意定位显示的动画移动：内联元素到位置：相对最终位置

3 个答案: