我想将(回旋镖的)图像滑出屏幕,然后在 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">
最佳答案
您用 javascript 标记了问题并提供了不完整的 javascript 解决方案的代码,但您还提到您希望它顺利进行。
也许使用变换声明 CSS 动画会更好? 查看https://daneden.github.io/animate.css/有关 CSS 动画可以做什么的一些示例。它们可能非常复杂,因为您可以根据需要定义任意数量的步骤。
现在,如果您需要在某些动画步骤中执行计算,那么您只能使用 JS,但您仍然可以使用一个在幕后使用 CSS 过渡的库来获得平滑的帧速率。
我过去曾使用 move.js
来完成这样的任务,并且效果很好。
https://visionmedia.github.io/move.js/
关于javascript - 将元素滑出屏幕 -- 等待 --- 滑回原位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34469651/