I can't figure out how to do easing in jQuery

Question

This is what I've pieced together from the internet. The slideDown works but it still looks linear. Is my aproach completely wrong or am I just missing something subtle? And how do I get it working?

 $.easing.easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
 };

 $("#view").slideDown(200,'easeOutQuad');

Answer 1

Perhaps you are missing something subtle. It looks like you are trying to do "custom easing" using the easing plugin as a guide. What I think is happening is that you have a very short animation duration of 200 milliseconds. At this speed, the reduction in speed will be very subtle. Try expanding that to 2000 (or even 3000) milliseconds to see the easing in action.

In addition, the easeOutQuad is a subtle animation as it is. It won't be a dramatic effect when you run it. As a matter of learning the basics of jQuery easing, try taking the algoritm code from the "easeOutElastic" and put it in your function to see a more dramatic effect. This will give you the confidence of knowing that your code is working. Once you are confident it is working, take out the elastic algorithm and put your original back.

Sample code:

$.easing.easeOutQuad = function (x, t, b, c, d) {
    //return -c *(t/=d)*(t-2) + b;
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

$("#view").slideDown(2000,'easeOutQuad');