jQuery UI Example - `Effect`

Apply an animated effect to an element.

For more details about the .effect() method, please refer to the API documentation .effect().

.effect() Demonstration

Click the button to preview the effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - .effect() Demonstration</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 the select menu
      var selectedEffect = $( "#effectTypes" ).val();

      // Most effect types need no options
      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;
    });
  });
  </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>
```html
<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</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">Run Effect</a>

</body>
</html>

View Demo

Easing Demo

This example uses the HTML Canvas element to draw all the easings provided by jQuery UI. Click on each graph to see the behavior of the easing.

<!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 requires a browser that supports canvas."
      ).appendTo( "#graphs" );
      return;
    }

    var 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, 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();

// Dynamically change 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); }); }); </script> </head> <body>

</body> </html> View Demo

❮ Example Autocomplete Example Dialog ❯

jQuery UI Example - Effect

.effect() Demonstration

Easing Demo

jQuery UI Example - `Effect`