Question

我想在屏幕上滑动（回旋镖）图像，然后在5秒后将其滑回原位。我希望图像在某些文本旁边开始并结束。

理想情况下，我希望动画能够流畅。我可以找到许多像这样的事情的例子，但似乎没有一个做这个非常简单的事情。任何指向正确方向的人都会非常感激。

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 1

您已使用javascript标记了该问题，并提供了一个不完整的JavaScript解决方案的代码，但您也提到了您希望它能够顺利进行。

也许使用变换声明CSS动画会更好？查看https://daneden.github.io/animate.css/以获取CSS动画可以执行的操作的一些示例。它们可能非常复杂，因为您可以根据需要定义多个步骤。

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

我过去曾使用move.js执行此类任务，并且运作良好。 https://visionmedia.github.io/move.js/

幻灯片元素关闭屏幕 - 等待---向后滑动

1 个答案: