Animating Position Changes

Applying animations to position changes, using the jQuery UI position utility.

by Adam Boduch

HTML

<button>Go</button>
<span id="moveme" class="ui-widget ui-widget-content ui-corner-all">Move Me</span>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>

CSS

body {
    font-size: 0.8em;
}

span {
    padding: 0.2em;
}

JavaScript

$(function() {
    $( "button" ).button().click(function( e ) {
        $( "#moveme" ).position({
            my: "right bottom",
            at: "right bottom",
            of: "body",
            using: function( pos, ui ) {
                ui.element.element.animate( 
                    pos, { 
                        duration: 800,
                        easing: "easeOutExpo"
                    });
            }
        });
    });
});