当<img>页面完全加载时，无限上下+- 5px的元素动画。我应该从哪里开始寻找如何实现这一目标？

Question

我正试图在jQuery中找到任何可能实现这一目标的东西，但运气不佳。有人介意给我指个正确的方向吗？

编辑：我尝试过的：

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

我认为，这将在200毫秒的时间内使页面加载量增加10倍。它什么也没做。此外，即使我真的以这种方式让它发挥作用，它也不会无限重复（向下10倍，然后向上10倍，再向下……等等）。所以我真的不知道我怎么才能做到这一点。

编辑：收到了，谢谢@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();
});