Как добавить анимацию в этот jquery?

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);
});

Это оживит CSS-свойство bottom на 500 мс. Он также прерывает все запущенные анимации, чтобы предотвратить неловкое поведение (вызванное очередями).

Answer 2

заменить .css() функцию

, например,

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

для API JQuery animate (): http://api.jquery.com/animate/

Answer 3

просто измените .css на .animate

Будет работать что-то вроде следующего:

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

Я добавил функцию остановки в режиме зависания, чтобыпредыдущая анимация еще не закончена, она сразу заканчивается.

Answer 4

просто изменить .css() с .animate()