0

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');
Colin Brock
  • 21,267
  • 9
  • 46
  • 61
rtoner
  • 3
  • 1
  • 1
    Are you asking about custom easing? Because jQuery UI comes with many easing functions. – The Muffin Man Jun 15 '12 at 19:43
  • It appears to be working, it's just that the easing you chose is pretty close to linear: http://jsfiddle.net/QfeL2/. I checked it against the jQuery Easing Plugin found here: http://gsgd.co.uk/sandbox/jquery/easing/. Whenever you try to use an easing method that doesn't exist, jQuery actually throws an error in your console. You can see this by changing the easing to something that you know doesn't exist. – Jasper Jun 15 '12 at 19:48
  • are you using the jQuery easing plugin http://gsgd.co.uk/sandbox/jquery/easing/? – mawcsco Jun 15 '12 at 19:49
  • @mawcsco The OP has included the easing code in their question... – Jasper Jun 15 '12 at 19:49
  • @Jasper I asked because the plugin has an "easeOutQuad" and I wasn't sure if the OP misunderstood how to use the plugin. – mawcsco Jun 15 '12 at 19:54
  • @mawcsco You don't need a plugin to add easing methods. jQuery exposes the `$.easing` method to add your own, as you can see in the question. If you take a look at the jQuery Easing Plugin's code, you'll see that all it does is add a bunch of easing methods using code like in the question. – Jasper Jun 15 '12 at 20:35
  • I'm well aware of how jQuery works and how the plugin works. What I don't understand is what the OP is trying to do. If you notice, his easeOutQuad is identical to that of the plugin. Why is that? What is he trying to do? Is he just copying it here for reference? Is he writing his own? Is he doing homework? – mawcsco Jun 15 '12 at 21:13
  • @mawcsco (*she actually) I'm trying to avoid using the plugin if I can. But since I'm pretty new to this I am imitating it as a starting point. – rtoner Jun 18 '12 at 15:11
  • @rtoner I apologize for "he," I tend toward traditional grammar in the use of "he" as the correct pronoun. Perhaps I should get behind the trend for the "singular they" http://en.wikipedia.org/wiki/Singular_they, but that's a topic for another SA site :) – mawcsco Jun 18 '12 at 17:02

1 Answers1

0

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');
mawcsco
  • 624
  • 6
  • 18