Today we’ll explore a jQuery-powered animation effect that you sometimes see: An object that moves across the screen, morphing into a fixed button when it reaches the opposite side of the browser window. Here’s an example.

It’s certainly not a best practice from a UX point of view — most users hate gratuitous animations. But there are specific sites and situations where it might be appropriate. Meanwhile,  it’s fun and a good technical lesson in the junction between jQuery and CSS.

HTML

    <div id="airplane">&nbsp;</div>

    <div id="fixed-button">
        <a href="javascript:alert('You clicked the button!');">Click me!</a>
    </div>

This part is pretty simple: An “airplane” div that will move, and a div containing the button that it will turn into.

CSS

    #airplane {
        position:absolute;
        top:50px;
        left:-200px;
        width:200px;
        height:50px;
        background:url('airplane.png') no-repeat top left transparent;
    }
    #fixed-button {
        position:fixed;
        right:0;
        top:50px;
        width:50px;
        display:none;
    }
    #fixed-button a {
        display:block;
        padding:5px;
        width:40px;
        background:gray;
        text-decoration:none;
        color:white;
        font-weight:bold;
        text-align:center;
    }
    #fixed-button a:hover {
        text-decoration:none;
        background:black;
    }

1. The #airplane div is given a height and width equal to the dimensions of its background image and positioned just off the left side of the screen. The background image is a PNG with a transparent background, so it will appear to float above the page content.
2. The #fixed-button div is given a fixed position on the opposite side of the screen and set to “display:none;” so users don’t see it.
3. The divs are positioned carefully so that they are the same height and the same distance down from the top of the window. That will let us create the illusion of one turning into the other.

jQuery

    $(document).ready(function() {
        move_box();
    });
    function move_box() {
        var windowwidth = $(window).width();
        var transitionpoint = windowwidth - 50;
        $("#airplane").animate( {"left": transitionpoint + 'px'}, 10000,'linear',function(){show_button();});
    }
    function show_button() {
        $("#fixed-button").show();
        $("#airplane").hide();
    }

Here’s how the jQuery works:

1. When the page loads, the move_box() function fires.
2. The function first measures the width of the window and subtracts 50 pixels from it (the width of the #fixed-button div).
3. It then starts the #airplane div moving across the screen using jQuery’s animate() function. Let’s go through that code piece by piece:

    {"left": transitionpoint + 'px'},

Tells jQuery to move the #airplane div from where it is now (just off the left side of the screen) to a point on the screen where its upper lefthand corner is 50 pixels from the right side of the screen.

    10000,

Tells jQuery that the movement should take 10,000 milliseconds (10 seconds).

    'linear',

This describes the easing effect to apply to the animation. The default is “swing”, which slows down the animation as it approaches the end. Setting it to “linear” allows the airplane to move at a constant speed.

    function(){show_button();}

Calls the show_button() function once the animation is completed. That function hides the #airplane div and shows the #fixed-button div. Because it fires once the #airplane div has reached the right edge of the screen, it looks like the airplane flies right off the edge of the screen and leaves the fixed button behind.