CSS3: Animated button using transition on mouse hover

This entry is part 5 of 13 in the series CSS3

Here we show a transition of a link button changing its color from gray to black.

The color that we want to transition to is on the :hover.

Without setting the transition effect, it will change to black immediately.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transistions</title>
    <style>
        a {
            background: gray;
            border-radius: 5px;
            display: block;
            float: left;
            padding: 5px;
            text-align: center;
            width: 125px;
            -webkit-transition: all 1s ease-in;
            -moz-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;
        }

        a:hover {
            background: black;
            color: white;
        }
    </style>
</head>
<body>

<a href='//yahoo.com'>Link to Yahoo</a>

</body>
</html>

The key piece of CSS is transition: all 1s ease-in.  With this line, the browser will animate all the properties (background and color) to use the ease-in timing function.

The total time of transition is 1 second.

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

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 & Dialog: Dialog With Animation

This entry is part 3 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Animation

Dialogs may be animated by specifying an effect for the show and/or hide properties.

You need to include the individual effects for any effects you would like to use.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Animation</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'>
    <script>
        $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                show: {
                    effect: 'blind',
                    duration: 1000
                },
                hide: {
                    effect: 'explode',
                    duration: 1000
                }
            });

            $('#opener').click(function () {
                $('#dialog').dialog('open');
            });
        });
    </script>
</head>
<body>

<div id='dialog' title='Basic dialog'>
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized
        and closed with the 'x' icon.</p>
</div>

<button id='opener'>Open Dialog</button>


</body>
</html>
Try The Code

jQuery: Common animation effects

This entry is part 17 of 33 in the series jQuery Tutorial

The jQuery library provides several techniques for adding animation to a web page.

These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects such as those used in jqueryui.com or jquerymobile.com.

EffectDescription
.animate()Perform a custom animation of a set of CSS properties.
.delay()Set a timer to delay execution of subsequent items in the queue.
.fadeIn()Display the matched elements by fading them to opaque.
.fadeOut()Hide the matched elements by fading them to transparent.
.fadeTo()Adjust the opacity of the matched elements.
.finish()Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
.hide()Hide the matched elements.
.show()Display the matched elements.
.slideDown()Display or hide the matched elements with a sliding motion.
.slideUp()Hide the matched elements with a sliding motion.
.slideToggle()Display or hide the matched elements with a sliding motion.
.toggle()Display or hide the matched elements.