jQuery UI & Tooltips: Custom animations

This entry is part 3 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Custom animation demo

This demo shows how to customize animations using the show and hide options, as well as the open event.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Custom animation 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'>
    <script>
        $(function () {
            $('#show-option').tooltip({
                show: {
                    effect: 'slideDown',
                    delay: 250
                }
            });
            $('#hide-option').tooltip({
                hide: {
                    effect: 'explode',
                    delay: 250
                }
            });
            $('#open-event').tooltip({
                show: null,
                position: {
                    my: 'left top',
                    at: 'left bottom'
                },
                open: function (event, ui) {
                    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, 'fast');
                }
            });
        });
    </script>
</head>
<body>

<p>There are various ways to customize the animation of a tooltip.</p>

<p>You can use the <a id='show-option' href='http://jqueryui.com/demos/tooltip/#option-show' title='slide down on show'>show</a>
    and
    <a id='hide-option' href='http://jqueryui.com/demos/tooltip/#option-hide' title='explode on hide'>hide</a> options.
</p>

<p>You can also use the <a id='open-event' href='http://jqueryui.com/demos/tooltip/#event-open'
                           title='move down on show'>open event</a>.</p>

</body>
</html>
Try The Code

jQuery: Animations and Effects.

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

With the advent of HTML5 and touch based computing devices such as iPhone and tablets, it is more common for programmers to make use of animation to create touch based effects in the user interface.

There are a few methods that we can use in jQuery to create animation effects.  Let’s look at .animate method.

.animate(properties, options)

Properties: An object of CSS properties and values that the animation will move toward.

Options:  Can be duration(ms), easing or others

The example below is an animation of the div with a number of different CSS properties.  The duration of the effect, which is an expansion of the div block, will be 1500ms

<!doctype html>
<head>
    <title>animate demo</title>
    <style>
        div {
            background-color: #bca;
            width: 100px;
            border: 1px solid green;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

<button id='go'>» Run</button>
<div id='block'>Hello!</div>

<script>
    // Using multiple unit types within one animation.

    $('#go').click(function () {
        $('#block').animate({
            width: '70%',
            opacity: 0.4,
            marginLeft: '0.6in',
            fontSize: '3em',
            borderWidth: '10px'
        }, 1500);
    });
</script>

</body>
</html>
Try The Code