jQuery Poof Effect

Following up on my last post, jQuery UI Draggable Icons, which offered a way of presenting visual cues to help users identify draggable page elements, this article examines a technique for providing visual feedback when a page element is removed.

The poof effect

Mac OS X users will be familiar with the poof animation that occurs when application icons are removed from the dock. The animation looks nice, is unobtrusive, and provides a clear indication of the function being performed. Why not bring this effect to the web?

or see the example

Hiding and removing elements with jQuery

The jQuery library provides several methods for hiding the display of page elements or removing them entirely from the document tree. The remove() and hide() methods cause elements to disappear instantaneously. The sudden disappearance can leave your site visitors wondering exactly what happened when they clicked that delete button. The fadeOut() method, however, provides a more graceful exit. We’ll use that in our example. Let’s get started with the code:

<div class="deleteme">
delete me
</div>


Above is the HTML for the element we’ll be removing from the page. Now let’s remove it with jQuery:

$(document).ready(function() {
$('.deleteme').click(function() {
$(this).fadeOut('fast');
});
});


Here we use the standard jQuery technique of attaching event handlers to page elements when the document structure has finished loading. In the above code, each element that has a class name of “deleteme” is assigned an onclick event that when performed, causes the clicked element to quickly fade and become hidden. It works nicely and provides a base level of visual feedback for the user. But we can do better.

Elements of a poof

We’ll be creating our poof using sprite animation. Sprite animation is a technique in which all of the frames used in an animation sequence are collected side-by-side in a single image file. Only a small portion, or frame, of the complete image is displayed at a given time and the animation is composed by sequentially adjusting the visible portion of the image, much like a filmstrip. You can see the image we’ll be using for our animation to the right. It is divided into five frames.

Why use sprite animation?

Using an animated GIF might be easier and wouldn’t require as much coding, but sprite animation offers two distinct advantages: First, with sprite animation we have the option of using PNG images with alpha transparency (GIF offers only binary transparency and MNG support by the major browsers just never took off). Second, we can control the frame rate of sprite animations programatically, so a single image file can be animated at any speed by simply typing in the desired frame rate—no need to create a whole new version of the image file.

Displaying and animating the sprite

First, we’ll place an empty <div> tag on the page to hold the poof sprite:

<div class="poof"></div>


Then we can style it with CSS:

.poof {
background: transparent url(../images/poof.png) no-repeat 0 0;
cursor: pointer;
display: none;
height: 32px;
position: absolute;
width: 32px;
}


Here, the poof sprite (poof.png) is set as the background image and its top and left positions are both set to 0. The display is set to none, so the element is currently invisible. The height and width are both set to 32 pixels, which is the size of each frame in our animation. We have set the position type to absolute, but have not specified the top and left values. These we will handle in JavaScript with jQuery:

$(document).ready(function() {
$('.deleteme').click(function(e) {
var xOffset = 24;
var yOffset = 24;
 
$(this).fadeOut(’fast’);
 
$(’.poof’).css({
left: e.pageX - xOffset + ‘px’,
top: e.pageY - yOffset + ‘px’
}).show();
 
animatePoof();
});
});


Now, when the “.deleteme” element is clicked, the “.poof” animation is positioned next to our cursor (see the jQuery docs for more on how to use pageX and pageY to determine the cursor position). Its position relative to the cursor is determined by the xOffset and yOffset variables we defined. Next, we use .show() to turn the display of the poof animation on and run the animation by calling a separate function, animatePoof():

function animatePoof() {
var bgTop = 0;
var frames = 5;
var frameSize = 32;
var frameRate = 80;
 
for(i = 1; i < frames; i ++) {
$('.poof').animate({
backgroundPosition: '0 ' + (bgTop - frameSize) + 'px'
}, frameRate);
 
bgTop -= frameSize;
}
 
setTimeout("$('.poof').hide()", frames * frameRate);
}


The animatePoof() function is composed of a loop that resets the background-position of the .poof <div> by the height of one frame per iteration, creating a simple animation effect. The bgPosition variable represents the initial top position of the background-image. This value is decreased by 32 pixels on each iteration of the loop. The frameRate variable determines the speed of the animation. Here, each frame is displayed for 80 milliseconds. Once the animation has completed, we need to hide the poof <div> so that its presence (though invisible) will not block attempts to click other elements we want to delete. This is accomplished with the setTimeout call.

License

The poof image used in this example was created by The Kombine Group and is modeled after the Apple OS X dock poof. It is provided here for free and is licensed under both the GPL and MIT licenses—the same licensing used by the jQuery library itself.

Download

Clicking the “Get the poof” button below will download a ZIP file containing the poof as a PNG file, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file. In the PSD, each frame is 128 × 128 pixels, so you can use it for creating much larger poofs if you desire.

or see the example

by Kreg Wallace | June 24, 2008 | trackback