How to add a bounce effect to a JS function

Question

How would I add a "bounce" effect to this slide-in function;

$(window).load(function(){

$('.show').hover(function() {
$('.tool_hover').animate({
    'left':'190px'},
                        'slow');
},function() {
$('.tool_hover').animate({
    'left':'3000px'},
                        'slow');
});

});

so that when the "tool_hover" completes its slide in to 190px it bounces left to right before coming to a complete stop.

Answer 1

Add the jQuery easing plugin:

http://gsgd.co.uk/sandbox/jquery/easing/

Then add 'easeInOutBack' to your animation syntax. It looks like this:

$('.show').hover(function() {
    $('.tool_hover').animate({'left':'190px'}, {left:'easeOutBack'}, 'slow');
},function() {
    $('.tool_hover')$('.tool_hover').animate({'left':'3000px'}, {left:'easeOutBack'}, 'slow');
});

Answer 2

jQuery UI has bounce effect.

UI/Effects/Bounce