Side navigation
#7375 closed enhancement (plugin)
Opened November 02, 2010 07:38AM UTC
Closed April 16, 2011 11:58PM UTC
Last modified March 15, 2012 12:46PM UTC
Allow custom easing functions with animate
Reported by: | janne.aukia@gmail.com | Owned by: | |
---|---|---|---|
Priority: | undecided | Milestone: | |
Component: | effects | Version: | 1.4.3 |
Keywords: | needsreview | Cc: | |
Blocked by: | Blocking: |
Description
I would like to make a jQuery plugin which would allow using cubic easing in the same way as in CSS3 transformations. As far as I know, this is currently not possible, since currently all easings need to be named functions under jquery.easing and they cannot take extra parameters.
What I would like to have would be something like the following:
function constructCubicEasing(p1x,p1y,p2x,p2y) { return function( p, n, firstNum, diff ) { // here setup the actual easing func based on p1x...p2y }; } $(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));
So instead of passing named arguments for easing functions (such as "swing" or "linear") one could pass an actual function.
Another alternative would be to have a way to pass parameters to the easing function, something like:
jquery.easing.cubic = function(p, n, firstNum, diff, extraParams) { // here setup the actual easing func based on p1x...p2y in extraParams } $(".block").animate({"left": "0px"}, "cubic", null, {p1x:0.42,p1y:0.0,p2x:0.58,p2y:1.0});
The motivation behind these is that designers often want to tweak easing parameters to please their tastes, and for them, having some config params would be nice.
Attachments (0)
Change History (4)
Changed November 02, 2010 09:05PM UTC by comment:1
component: | unfiled → effects |
---|---|
keywords: | → needsreview |
milestone: | 1.5 |
status: | new → open |
Changed February 17, 2011 11:29AM UTC by comment:2
One thing to note... The "standard" fx calls to easing functions ALWAYS use
firstNum = 0, diff = 1-
pis the actual "percent" and
nis a number of milliseconds...
Changed April 16, 2011 11:58PM UTC by comment:3
resolution: | → plugin |
---|---|
status: | open → closed |
I would be inclined to do something like this:
(function(){ var num = 1; this.constructCubicEasing = function(p1x,p1y,p2x,p2y) { var name = "cubic" + num; jQuery.easing[ name ] = function( p, n, firstNum, diff ) { // here setup the actual easing func based on p1x...p2y }; num++; return name; }; })();
Then you could just do:
$(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));