Permalink
Browse files

Effects: Use linear easing when old-style easing is detected

Fixes #258
Closes #264
  • Loading branch information...
dmethvin committed Jul 20, 2017
1 parent 3759b66 commit 05c23989b15470547eff1da9ad6fcbd1facd2183
Showing with 36 additions and 36 deletions.
  1. +5 −7 src/effects.js
  2. +25 −23 test/effects.js
  3. +6 −6 warnings.md
View
@@ -1,17 +1,15 @@
var oldTweenRun = jQuery.Tween.prototype.run;
var linearEasing = function( pct ) {
return pct;
};
jQuery.Tween.prototype.run = function( ) {
if ( jQuery.easing[ this.easing ].length > 1 ) {
migrateWarn(
"easing function " +
"\"jQuery.easing." + this.easing.toString() +
"\" should use only first argument"
"'jQuery.easing." + this.easing.toString() + "' should use only one argument"
);
var oldEasing = jQuery.easing[ this.easing ];
jQuery.easing[ this.easing ] = function( percent ) {
return oldEasing.call( jQuery.easing, percent, percent, 0, 1, 1 );
}.bind( this );
jQuery.easing[ this.easing ] = linearEasing;
}
oldTweenRun.apply( this, arguments );
View
@@ -1,45 +1,47 @@
QUnit.module( "effects" );
QUnit.test( "jQuery.easing", function( assert ) {
var lastP = false,
var lastP = -0.1,
easingCallCount = 0,
animComplete = assert.async();
assert.expect( 6 );
assert.expect( 4 );
jQuery.easing.test = function( p, n, firstNum, diff ) {
// First frame of animation
if ( easingCallCount === 0 ) {
assert.notEqual( n, undefined );
assert.notEqual( firstNum, undefined );
assert.notEqual( diff, undefined );
// Second frame of animation. (Only check once so we know how many assertions to expect.)
} else if ( easingCallCount === 1 ) {
assert.ok( p > 0 );
jQuery.easing.testOld = function( p, n, firstNum, diff ) {
assert.ok( false, "should not have been called" );
};
jQuery.easing.testNew = function( p ) {
if ( ++easingCallCount < 3 ) {
assert.ok( p > lastP, "called, percentage is increasing" );
lastP = p;
}
lastP = p;
easingCallCount++;
// Linear
return p;
};
var div = jQuery( "<div>test</div>" );
div.appendTo( "#qunit-fixture" );
var div = jQuery( "<div>test</div>" )
.css( "width", "30px" )
.appendTo( "#qunit-fixture" );
// Can't use expectWarning since this is async
div;
jQuery.migrateReset();
div.animate( { width: 20 }, {
duration: 100,
easing: "test",
div.animate( { width: "20px" }, {
duration: 50,
easing: "testOld",
complete: function() {
assert.equal( lastP, 1, "easing" );
assert.equal( jQuery.migrateWarnings.length, 1, "warned" );
animComplete();
jQuery.migrateWarnings.length = 0;
div.animate( { width: "10px" }, {
duration: 50,
easing: "testNew",
complete: function() {
assert.equal( jQuery.migrateWarnings.length, 0, "did not warn" );
animComplete();
}
} );
}
} );
} );
View
@@ -131,21 +131,21 @@ This is _not_ a warning, but a console log message the plugin shows when it firs
**Solution**: Replace any use of `$( document ).on( "ready", fn )` with `$( fn )`. This approach works reliably even when the document is already loaded.
### JQMIGRATE: Additional params for 'jQuery.easing' functions are not documented and redundant
### JQMIGRATE: 'jQuery.easing.NAME' should use only one argument
**Cause**: Additional params for `jQuery.easing` methods were never documented and redundant, same behavior could be easily achieved by other means.
**Cause**: Additional arguments for `jQuery.easing` methods were never documented and are redundant since the same behavior can be easily achieved without them. When Migrate detects this case, the specified easing function is not used and `"linear"` easing is used instead for the animation.
**Solution**: Instead of using time and duration arguments, etc; it is already sufficient to use only first "percentage" argument.
**Solution**: Rewrite the easing function to only use one argument. If you are using the [jQuery Easing plugin](http://gsgd.co.uk/sandbox/jquery/easing), upgrade to [version 1.4.0 or higher](https://github.com/gdsmith/jquery.easing/releases).
For example, if you want to implement [Cubic](https://en.wikipedia.org/wiki/Cubic_function) function, then instead of old approach -
For example, to implement [Cubic](https://en.wikipedia.org/wiki/Cubic_function) easing, the old function might be:
```js
jQuery.easing.easeInCubic = function ( p, t, b, c, d ) {
return c * ( t /= d ) * t * t + b;
}
```
You could achive same effect with -
You can achive same effect with this:
```js
jQuery.easing.easeInCubic = function ( p ) {
@@ -217,4 +217,4 @@ See jQuery-ui [commit](https://github.com/jquery/jquery-ui/commit/c0093b599fcd58
**Cause:** The `.hover()` method is a shorthand for the use of the `mouseover`/`mouseout` events. It is often a poor user interface choice because it does not allow for any small amounts of delay between when the mouse enters or exits an area and when the event fires. This can make it quite difficult to use with UI widgets such as drop-down menus. For more information on the problems of hovering, see the [hoverIntent plugin](http://cherne.net/brian/resources/jquery.hoverIntent.html).
**Solution:** Review uses of `.hover()` to determine if they are appropriate, and consider use of plugins such as `hoverIntent` as an alternative. The direct replacement for `.hover(fn1, fn2)`, is `.on("mouseenter", fn1).on("mouseleave", fn2)`.
**Solution:** Review uses of `.hover()` to determine if they are appropriate, and consider use of plugins such as `hoverIntent` as an alternative. The direct replacement for `.hover(fn1, fn2)`, is `.on("mouseenter", fn1).on("mouseleave", fn2)`.

0 comments on commit 05c2398

Please sign in to comment.