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的定位是相对的还是绝对的，并且你已经为bottom设置了一些值。否则它将无法工作。

a {
    position: relative;
    bottom: 0;
}

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

Answer 2

如果您想要在用户的鼠标进入链接时上下跳动，请尝试fiddle

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

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

使用悬停jquery进行动画移动

2 个答案: