Apply an animated effect to an element.
For more details about the `.effect()` method, please see the API documentation [.effect()](#).
## .effect() Demo
Click the button to preview the effect.
jQuery UI Effects - .effect() Demo .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } $(function() { // Run the currently selected effect function runEffect() { // Get the selected effect from the dropdown var selectedEffect = $( "#effectTypes" ).val(); // Most effects don't require options by default var options = {}; // Some effects have required parameters if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // Run the effect $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // Callback function function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // Set effect from select menu value $( "#button" ).click(function() { runEffect(); return false; }); });
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
Blind Effect Bounce Effect Clip Effect Drop Effect Explode Effect Fade Effect Fold Effect Highlight Effect Puff Effect Pulsate Effect Scale Effect Shake Effect Size Effect Slide Effect Transfer Effect
Run Effect
## Easing Demo
This example uses an HTML Canvas element to draw all the easings provided by jQuery UI. Click on each graph to see the behavior of that easing.
jQuery UI Effects - Easing Demo .graph { float: left; margin-left: 10px; } $(function() { if ( !$( "" ).getContext ) { $( "
" ).text( "Your browser does not support canvas, this demo requires a browser that supports canvas." ).appendTo( "#graphs" ); return; } var i = 0, width = 100, height = 100; $.each( $.easing, function( name, impl ) { var graph = $( "
" ).addClass( "graph" ).appendTo( "#graphs" ), text = $( "
" ).text( ++i + ". " + name ).appendTo( graph ), wrap = $( "
" ).appendTo( graph ).css( 'overflow', 'hidden' ), canvas = $( "" ).appendTo( wrap ); canvas.width = width; canvas.height = height; var drawHeight = height * 0.8, cradius = 10; ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; // Draw background ctx.beginPath(); ctx.moveTo( cradius, 0 ); ctx.quadraticCurveTo( 0, 0, 0, cradius ); ctx.lineTo( 0, height - cradius ); ctx.quadraticCurveTo( 0, height, cradius, height ); ctx.lineTo( width - cradius, height ); ctx.quadraticCurveTo( width, height, width, height - cradius ); ctx.lineTo( width, 0 ); ctx.lineTo( cradius, 0 ); ctx.fill(); // Draw baseline ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); // Draw top line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); // Draw easing ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; ctx.moveTo( width * 0.1, drawHeight ); $.each( new Array( width ), function( position ) { var state = position / width, val = impl( state, position, 0, 1, width ); ctx.lineTo( position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); // Animate on click graph.click(function() { wrap .animate( { height: "hide" }, 2000, name ) .delay( 800 ) .animate( { height: "show" }, 2000, name ); }); graph.width( width ).height( height + text.height() + 10 ); }); });
YouTip