easing effect on jQuery doesn't work

Question

i am new on stackoverflow and on jQuery.. woundered why the effect of the easing doesn't work for me with jQuery.. the little box is popping up as i want but without the effect i set.

<script> 
$('#box').mouseover(function() 
{   
     $('#details').animate({height:'50px', marginTop:'350px'}, 
                        { duration: 600, easing: 'easeInOutBounce' }
     ); 
});
</script>

and in the header of the document i set:

<script src="jquery.easing.1.3.js" type="text/javascript"></script> 
<script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script> 
<script src="jquery.easing.compatibility.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/humanity/jquery-ui.custom.css" /> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery-ui.custom.min.js"></script>

Answer 1

Try it

$('#details')
 .stop()//stop all running animations
 .animate(//start a new animation
   {height:'50px', 
    marginTop:'350px'}, 600, 'easeInOutBounce' 
 );