How do I add animation to this jquery?

I would like to add some animation to this jquery, at the moment the div 'pops up' on hover.

$(document).ready(function() {

$('.recruiter开发者_如何学编程Link').hover(function() {

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

}, function() {

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

});

});

How do I go about doing that? Thanks

Are you looking for something like this (should work out of the box)?

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

This will animate the bottom CSS property for 500 ms. It also aborts all running animations to prevent awkward behaviour (caused by queueing).

just change the .css to .animate

Something like the following would work:

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

I've added the stop function in the hover off so that if the previous animation hasn't finished it finishes straight away.

replace .css() function

with, for example

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

for JQuery animate() API reference: http://api.jquery.com/animate/

just change .css() with .animate()