jQuery Easing Issue

Question

I've got an Unordered List setup, I would like to apply the simple elastic property used in jQuery. When running the script, I keep getting an JavaScript Error :

Error: D.easing[this.options.easing || (D.easing.swing ? "swing" : "linear")] is not a function Source File: jquery-pack.js?1296815924

The Java is working but it is not creating the desired effect. My jQuery Code is :

 <script type="text/javascript">
$(document).ready(function(){

 //When mouse rolls over
$("li").mouseover(function(){
    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeOutElastic"})
});

$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: "easeInBounce"})
});

     }); 
</script>

I had taken this script from a tutorial, so would have expected it to work. It seems that the easing is not being passed from page to the script?

Any help appreciated.

Answer 1

The easeOutElastic and easeInBounce easing functions are defined by the jQuery UI plugin, not by the core jQuery framework.

You'll have to include that plugin in your page.