jQuery.effects.define( name [, mode ], effect )Returns: Functionversion added: 1.12
Description: Defines an effect.
Defines a new effect for use with .effect()
, .show()
, .hide()
, and .toggle()
. The effect method is invoked with this
being a single DOM element. The done
argument must be invoked when the animation is complete.
jQuery.effects.define()
stores the new effect in jQuery.effects.effect[ name ]
and returns the function that was provided as the effect
parameter.
Example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.effects.define demo</title> <link rel="stylesheet" href="/doc_/-code-jquery-com-ui-1-12-0-themes-smoothness-jquery-ui-css.html?lang=en"> <style> .elem { position: absolute; width: 150px; height: 150px; background: #3b679e; } </style> <script src="//code.jquery.com/jquery-1.12.4.js" rel="external nofollow" ></script> <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js" rel="external nofollow" ></script> </head> <body> Click anywhere! <div class="elem"></div> <script> $.effects.define( "fade", "toggle", function( options, done ) { var show = options.mode === "show"; $( this ) .css( "opacity", show ? 0 : 1 ) .animate( { opacity: show ? 1 : 0 }, { queue: false, duration: options.duration, easing: options.easing, complete: done } ); } ); $( document ).on( "click", function() { $( ".elem" ).toggle( "fade" ); } ); </script> </body> </html>