jquery - 使用悬停 jquery 动画运动

Question

我正在尝试获取一个图像链接，以便在使用 jquery 悬停时上下摆动......但到目前为止没有任何效果。继承人的代码：

$("#footer").find("a").hover(function () {
    $(this).animate({
        down: '+=10'
    }, 200);
}, function () {
    $(this).animate({
        down: '-=10'
    }, 200);
});

Answer 1

您要查找的 CSS 属性是bottom，而不是down。

$("#footer").find("a").hover(function () {
    $(this).animate({
        bottom: '+=10'
    }, 200);
}, function () {
    $(this).animate({
        bottom: '-=10'
    }, 200);
});

还要检查在你的 CSS 中，mage-links 的定位是相对的还是绝对的，并且你已经为底部设置了一些值。否则它将无法正常工作。

a {
    position: relative;
    bottom: 0;
}​

这是一个jsFiddle，我在其中设置了上述代码。

Answer 2

如果您正在寻找它在用户的鼠标进入链接时上下摆动一次，请尝试这个小提琴

$(".animate_handler").mouseover(function () {
    $(".animate_link").animate({top: '-=10px'}, 200).animate({top: '+=10px'}, 200);
});

请注意，链接位于一个容器内，在链接底部有足够的空间，以防止在链接动画超出鼠标范围时重复出现动画。