CODEWITHSUNDEEP
javascriptjquery
StuBlackett
StuBlackett

Reputation: 3857

jQuery Easing Issue

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.

Upvotes: 3

Views: 7825

Answers (2)

Capsule
Capsule

Reputation: 6159

You have to include an easing library like this one: http://gsgd.co.uk/sandbox/jquery/easing/

@Frédéric Hamidi No need for the whole jQuery UI there...

Upvotes: 2

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263187

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.

Upvotes: 4

Related Questions