jQuery UI & Effects: Animation Effects

This entry is part 5 of 10 in the series jQuery UI Effects

jQuery UI Effects – Effect demo

Simply click on the buttons to click on the effects.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI 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://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        .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 effect type from
                var selectedEffect = $('#effectTypes').val();

                // most effect types need no options passed 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 to bring a hidden box back
            function callback() {
                setTimeout(function () {
                }, 1000);

            // set effect from select menu value
            $('#button').click(function () {
                return false;

<div class='toggler'>
    <div id='effect' class='ui-widget-content ui-corner-all'>
        <h3 class='ui-widget-header ui-corner-all'>Effect</h3>

            Of all of the Avengers, Captain America always has been the most boring. He doesn’t have anger management issues like Hulk,
            a charmingly cunning brother with daddy issues like Thor.

<select name='effects' id='effectTypes'>
    <option value='blind'>Blind</option>
    <option value='bounce'>Bounce</option>
    <option value='clip'>Clip</option>
    <option value='drop'>Drop</option>
    <option value='explode'>Explode</option>
    <option value='fade'>Fade</option>
    <option value='fold'>Fold</option>
    <option value='highlight'>Highlight</option>
    <option value='puff'>Puff</option>
    <option value='pulsate'>Pulsate</option>
    <option value='scale'>Scale</option>
    <option value='shake'>Shake</option>
    <option value='size'>Size</option>
    <option value='slide'>Slide</option>
    <option value='transfer'>Transfer</option>

<a href='#' id='button' class='ui-state-default ui-corner-all'>Run Effect</a>

Try The Code

Series Navigation<< jQuery UI & Effects: Toggle
jQuery UI & Effects: Switch class >>

Leave a comment

Leave a Reply