-1

我试图找到任何可以在 jQuery 中实现这一点的东西，但没有运气。有人介意指出我正确的方向吗？

编辑：我尝试过的：

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

我认为，在 200 毫秒的跨度内，它会在页面加载时将其设置为 -10 像素。它什么也不做。另外，即使我确实让它以这种方式工作，它也不会无限重复（返回 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);
});
4

2 回答 2

4

下面是如何无限地做到这一点：

小提琴

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

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

$(document).ready(function() {
    animup();
});
于 2013-07-23T16:35:37.000 回答
4

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

.wiggley-caret{position:relative;}

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

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

然后，您可以添加功能以在该动画完成后返回并再次调用该函数。

于 2013-07-23T16:34:26.000 回答