Question

我想在这个jquery上添加一些动画，此时div在“悬停”时弹出。

$(document).ready(function() {

$('.recruiterLink').hover(function() {

    $(this).css({
        'bottom' : 0
    });

}, function() {

    $(this).css({
        'bottom' : -20
    });

});

});

我该怎么做呢？感谢

Answer 1

您是否正在寻找类似的东西（应该开箱即用）？

$('.recruiterLink').hover(function () {
    $(this).stop().animate({
        'bottom': '0px'
    }, 500);
}, function () {
    $(this).stop().animate({
        'bottom': '-20px'
    }, 500);
});

这将为bottom CSS属性设置动画500毫秒。它还会中止所有正在运行的动画，以防止出现尴尬行为（由排队引起）。

Answer 2

只需将.css更改为.animate

即可

以下内容可行：

$('.recruiterLink').hover(function() {
    $(this).animate({bottom : 0},1000);
}, function() {
    $(this).stop(false,false).animate({bottom: -20},1000);
});

我在悬停时添加了停止功能，这样如果前一个动画还没有完成，它就会立即完成。

Answer 3

替换.css()函数

，例如

.stop().animate({ bottom:'-=20px' },"slow")

用于JQuery animate（）API参考： http://api.jquery.com/animate/

Answer 4

只需使用.css()

更改.animate()

如何为此jquery添加动画？

4 个答案: