jQuery UI & Effects: Add Class

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

jQuery UI Effects – addClass demo

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - addClass 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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            width: 240px;
            padding: 1em;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').addClass('newClass', 1000, callback);
                return false;
            });

            function callback() {
                setTimeout(function () {
                    $('#effect').removeClass('newClass');
                }, 1500);
            }
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='ui-corner-all'>
        I am getting bigger and bigger and please do not stop me.
    </div>
</div>

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

</body>
</html>
Try The Code

In the line

$('#effect').addClass('newClass', 1000, callback);

A new class newClass will be added to the div in a duration of 1000ms.

Once the animation is completed, the callback function will be called removing the newly added class.  The newClass will be removed in 1500ms as in this line below.

$('#effect').removeClass('newClass');

jQuery UI & Effects: Toggle class

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

jQuery UI Effects – toggleClass Demo

Toggle class(es) on elements while animating with style changes.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - toggleClass 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.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
            position: relative;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }

        .newClass {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script>
        $(function () {
            $('#button').click(function () {
                $('#effect').toggleClass('newClass', 1000);
                return false;
            });
        });
    </script>
</head>
<body>

<div class='toggler'>
    <div id='effect' class='newClass ui-corner-all'>
        Changing from one class to another.
    </div>
</div>

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

</body>
</html>
Try The Code

When you first click on the button, the newClass will be removed.  Clicking on the button again will add the newClass back to the box.

jQuery UI & Effects: Color Animation

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

jQuery UI Effects – Animate demo

Toggling and changing of colors.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Animate 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='https://codecrawl.com/code/jqueryui/jqueryui_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;
            background: #fff;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            var state = true;
            $('#button').click(function () {
                if (state) {
                    $('#effect').animate({
                        backgroundColor: '#aa0000',
                        color: '#fff',
                        width: 500
                    }, 1000);
                } else {
                    $('#effect').animate({
                        backgroundColor: '#fff',
                        color: '#000',
                        width: 240
                    }, 1000);
                }
                state = !state;
            });
        });
    </script>
</head>
<body>

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

        <p>
            I am changing color and please ignore me my friend.
        </p>
    </div>
</div>

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


</body>
</html>
Try The Code

Clicking on the Toggle Effect button will change the background color of the div box with id=’effect’ to #aa0000.

jQuery UI & Effects: Toggle

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

jQuery UI Effects – Toggle Demo

Display or hide elements using custom effects.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Effects - Toggle 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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .toggler {
            width: 500px;
            height: 200px;
        }

        #button {
            padding: .5em 1em;
            text-decoration: none;
        }

        #effect {
            position: relative;
            width: 240px;
            height: 135px;
            padding: 0.4em;
        }

        #effect h3 {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
    </style>
    <script>
        $(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 === 'size') {
                    options = { to: { width: 200, height: 60 } };
                }

                // run the effect
                $('#effect').toggle(selectedEffect, options, 500);
            };

            // 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'>Toggle</h3>

        <p>
            Please do not hide me, my friend.
        </p>
    </div>
</div>

<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='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>
</select>

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

</body>
</html>
Try The Code

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'>
<head>
    <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='https://codecrawl.com/code/jqueryui/jqueryui_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 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 () {
                    $('#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>
            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.
        </p>
    </div>
</div>

<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>
</select>

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

</body>
</html>
Try The Code