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()