javascript - 将元素滑出屏幕 -- 等待 --- 滑回原位

Question

我想将(回旋镖的)图像滑出屏幕，然后在 5 秒后将其滑回原位。我希望图像紧挨着一些文本开始和结束。

理想情况下，我希望动画流畅。我可以找到很多这样的例子，但似乎没有一个是在做这件非常简单的事情。任何指向正确方向的指示都将不胜感激。

$(document).ready(function()
	{
      var my_div = $("#target");
      var div_top = my_div.offset().top;

      $(document).scroll(function()
        {
          if (div_top <= $(document).scrollTop()+($(window).height() /2))
            {
             // EVENT TO SEND IMAGE OFF SCREEN TO THE RIGHT
             // EVENT TO WAIT 5 SECONDS
             // EVENT TO SEND THE IMAGE BACK
            }
        });
	});

<div id="target;">
  <p style="font-size:32px; display: inline;">TEXT</p>
  <img id="foo" style="height:35px;" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Ic_account_box_48px.svgg">

Answer 1

您用 javascript 标记了问题并提供了不完整的 javascript 解决方案的代码，但您还提到您希望它顺利进行。

也许使用变换声明 CSS 动画会更好？查看https://daneden.github.io/animate.css/有关 CSS 动画可以做什么的一些示例。它们可能非常复杂，因为您可以根据需要定义任意数量的步骤。

现在，如果您需要在某些动画步骤中执行计算，那么您只能使用 JS，但您仍然可以使用一个在幕后使用 CSS 过渡的库来获得平滑的帧速率。

我过去曾使用 move.js 来完成这样的任务，并且效果很好。 https://visionmedia.github.io/move.js/