Can you use the css and javascript I've provided to update the poof? CSS #puff { cursor:pointer; display:none; position:absolute; height:32px; width:32px; background: url(http://i.imgur.com/wvPeK.png) no-repeat; } ul{padding:0;font-family:arial} li{ list-style:none; background: #eee; border:1px solid #ddd; cursor:pointer; float:left; margin:5px; padding:15px; }

Javascript

function animatePoof() { var bgTop = 0; var frames = 5; var frameSize = 32; var frameRate = 80; for(i=1;i<frames;i++) { $('#puff').animate({ backgroundPosition: '0 ' + (bgTop - frameSize) + 'px' }, frameRate); bgTop -= frameSize; } setTimeout("$('#puff').hide()", frames * frameRate); } $(function() { $('li').click(function(e) { var xOffset = 24; var yOffset = 24; $(this).fadeOut('fast'); $('#puff').css({ left: e.pageX - xOffset + 'px', top: e.pageY - yOffset + 'px' }).show(); animatePoof(); });