动画一个 <img> 页面完全加载时，元素上下上下浮动5px。 我应该从哪里开始寻找如何做到这一点？ [关闭]

Question

已关闭 。 这个问题需要细节或明确性。 它当前不接受答案。 了解更多 。

---

想改善这个问题吗？ 添加详细信息并通过编辑此帖子来澄清问题。

6年前关闭。

我试图找到可以在jQuery中完成此操作的任何方法，但没有运气。 有人介意将我指向正确的方向吗？

编辑：我已经尝试了：

$(document).ready(function() {
    $('.wiggley-caret').animate({ top: '-10px' }, 200);
});

我认为，它将在200毫秒的时间范围内在页面加载时使其动画达到-10px。 它什么也没做。 另外，即使我确实能够以这种方式工作，它也不会无限重复（往下退10px，然后往后退10px，再往下...等等）。 所以我也不知道我怎么能做到这一点。

编辑：知道了，谢谢@Jnatalzia-实际操作中： http ：//topsecret.phasesolutions.ca/

编辑2：解决方案：

新增position: relative; 到元素，以及以下JavaScript：

$(document).ready(function() {
    setInterval(function(){
        $('.wiggley-caret').animate({ top: '-=15px' }, 550);
        $('.wiggley-caret').animate({ top: '+=15px' }, 550);
    }, 1100);
});

Answer 1

您可能在元素上没有位置设置。 在您的CSS中

.wiggley-caret{position:relative;}

然后，您必须做-=而不是- 。 您的代码将如下所示，并且应该可以正常工作。

$(document).ready(function() {
    $('.wiggley-caret').animate({ top: '-=10px' }, 200);
});

然后，您可以添加该功能以在完成该动画后备份并再次调用该功能。

Answer 2

这是无限执行的方法：

小提琴

function animup() {
    $('.wiggley-caret').animate({ top: '-=10px' }, 200, animdown);
}

function animdown() {
    $('.wiggley-caret').animate({ top: '+=10px' }, 200, animup);
}

$(document).ready(function() {
    animup();
});