Applies an animation effect to an element.
For more .effect()
details about the method, see the API documentation for .effect() .
.effect() Demo
Click the button to preview the effect.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>JQuery UI special effects - .effect() demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .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; } </style> <script> $(function() { // Run the currently selected effect function runEffect() { // Get the effect type from var selectedEffect = $( "#effectTypes" ).val(); // Most effect types don't need to pass 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 effects $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; // Callback function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; // Set special effects according to the selection menu value $( "#button" ).click(function() { runEffect(); return false; }); }); </script> </head> <body> <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">特效(Effect)</h3> <p> Even without freedom, grief from, eleifend nor, always at, lorem. But on foot. There is no fear of the world, but the adipiscing, but the fate of my life. </p> </div> </div> <select name="effects" id="effectTypes"> <option value="blind">Blind Effect</option> <option value="bounce">Bounce Effect</option> <option value="clip">Clip Effect</option> <option value="drop">Drop Effect</option> <option value="explode">Explode Effect</option> <option value="fade">Fade Effect (Fade Effect)</option> <option value="fold">Fold Effect</option> <option value="highlight">Highlight Effect</option> <option value="puff">Puff Effect</option> <option value="pulsate">Pulsate Effect</option> <option value="scale">Scale Effect</option> <option value="shake">Shake Effect</option> <option value="size">Size Effect</option> <option value="slide">Slide Effect</option> <option value="transfer">Transfer Effect</option> </select> <a href="#" id="button" class="ui-state-default ui-corner-all">运行特效</a> </body> </html>
Easing Demo
This example uses the HTML Canvas element to draw all the easings provided by jQuery UI. Click on each graph to see that easing in action. .
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Easing Demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .graph { float: left; margin-left: 10px; } </style> <script> $(function() { if ( !$( "<canvas>" )[0].getContext ) { $( "<div>" ).text( "Your browser does not support canvas, this demo needs to be performed under a browser that supports canvas." ).appendTo( "#graphs" ); return; } where i = 0, width = 100, height = 100; $.each( $.easing, function( name, impl ) { var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ), text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ), wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ), canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ]; canvas.width = width; canvas.height = height; var drawHeight = height * 0.8, bolder = 10; ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; // draw the 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 bottom line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); // draw the 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(); // dynamically change when clicked graph.click(function() { wrap .animate( { height: "hide" }, 2000, name ) .delay( 800 ) .animate( { height: "show" }, 2000, name ); }); graph.width( width ).height( height + text.height() + 10 ); }); }); </script> </head> <body> <div id="graphs"></div> </body> </html>