Skip to content

Latest commit

 

History

History
66 lines (54 loc) · 1.7 KB

no-animate.md

File metadata and controls

66 lines (54 loc) · 1.7 KB

no-animate

Disallows the .animate/.stop/.finish methods. Use the allowScroll option to allow animations which are just used for scrolling. Prefer CSS transitions.

📋 This rule is enabled in plugin:no-jquery/slim.

📋 This rule is enabled in plugin:no-jquery/all.

Rule details

❌ Examples of incorrect code:

$( 'div' ).animate();
$( 'div' ).stop();
$( 'div' ).finish();
$div.animate();
$( 'div' ).first().animate();
$( 'div' ).append( $( 'input' ).animate() );
$div.animate( { scrollTop: 100 } );
$div.animate( { scrollLeft: 200 } );
$div.animate( { scrollTop: 100, scrollLeft: 200 } );
$div.animate( { scrollTop: 100, width: 300 } );

✔️ Examples of correct code:

animate();
[].animate();
div.animate();
div.animate;
stop();
[].stop();
div.stop();
div.stop;
finish();
[].finish();
div.finish();
div.finish;

❌ Examples of incorrect code with [{"allowScroll":false}] options:

$div.animate( { scrollTop: 100 } );

❌ Examples of incorrect code with [{"allowScroll":true}] options:

$div.animate();
$div.animate( { scrollTop: 100, width: 300 } );
$( 'div' ).stop( { scrollTop: 100, scrollLeft: 200 } );
$( 'div' ).finish( { scrollTop: 100, scrollLeft: 200 } );

✔️ Examples of correct code with [{"allowScroll":true}] options:

$div.animate( { scrollTop: 100 } );
$div.animate( { scrollLeft: 200 } );
$div.animate( { scrollTop: 100, scrollLeft: 200 } );

Resources