动画任意定位的display:inline元素移动到position:相对最终位置

Animate movement of arbitrarily positioned display:inline elements into a position:relative final position

本文关键字：position 相对 位置 移动 元素 定位 任意 display inline 动画      更新时间：2023-09-26

HTML代码包含一个div，它的span有两种类型:"hide"answers"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代码在适当的地方选择span类隐藏，使他们可能会消失，只留下"keep"类的span在div内可见:

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

问题:我如何使"keep"跨度从文本中的原始位置移动到其最终可见位置?

只要每个span的初始位置和最终位置能够被识别，动画代码的编写就不是一个挑战。挑战(我怀疑)是，一旦隐藏了"hide"类跨度，确定每个跨度的最终位置。请注意，尽管是我的示例代码，但div中有任意数量的"hide"answers"keep"span，每个span都有任意大的内容。

注意:使用JQuery 1.6+

附加问题:我怎么能动画的运动"保持"跨度回到他们的原始位置在"隐藏"跨度褪色后?

这是我的原始想法，几乎没有经过测试:

  1. 获取"keep"元素的位置
  2. 用display: none隐藏" Hide "元素
  3. 获取keep元素的新位置
  4. 再次显示"hide"元素
  5. 用visibility: hidden隐藏" Hide "元素(这样他们就保留了在布局中的位置)
  6. 使"keep"元素相对于正常位置的位置动画化。

因为你做了所有这些而没有让步，用户应该只看到动画(实时示例):

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
    });
  });
}

我认为最好的方法是在隐藏它们之前循环遍历每个隐藏跨度，并获得下一个元素("keep")元素并将其位置存储在变量中。然后你需要将它设置为绝对位置它的顶部和左侧位置设置为你刚刚得到的。此时，您还需要获取并存储"hide"元素的位置，并使用存储的变量将淡出和从"keep"位置移动到"hide"位置的动画化。

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

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

你也可以试试CSS3:transitions !可以创建一些神奇的效果，比如

相关文章：