• Choose a category
• All
• Classic-Fiction

By Root 1096 0

* frame_count). Of course, these will always be the same in our example, but this way, if you ever want to use a different animation image, you can find the numbers you need to change right at the top of the script, instead of hunting through it to change them in multiple places.

We then set up a container to house the image. The container will be exactly the same size, and in exactly the same place as the element we’re deleting:

chapter_07/14_drag_drop/script.js (excerpt)

// Create container

var $puff = $('

')

.css({

height: $this.outerHeight(),

left: $this.offset().left,

top: $this.offset().top,

width: $this.outerWidth(),

position: 'absolute',

overflow: 'hidden'

})

.appendTo('body');

With the container in place we can now append the animation image to it. Because the container has its overflow set to hidden, only a single frame of the image will ever be seen. To make the image fit the container (which is the same size as the element we’re deleting), we need to scale it to fit. The scale is determined by dividing the width of the container by the width of the image:

chapter_07/14_drag_drop/script.js (excerpt)

var scale_factor = $this.outerWidth() / image_width;

var $image = $('')

.css({

width: image_width * scale_factor,

height: (frame_count * image_width) * scale_factor

})

.data('count', frame_count)

.appendTo($puff);

Note: Preloading the Image

If you have a lot of frames in your animation image, it could wind up being a fairly large file and take a while to load. If your user deletes an element before the image has loaded, the animation will be unable to display. A trick for preloading the image is to load it into a jQuery selector in the document-ready function: $('');. This will load the image without displaying it, so it will be ready for your animation.

We also add a count property to the image via the data action. This contains the total number of frames left to show. With all of this in place, we can go ahead and delete the original element that was dropped:

chapter_07/14_drag_drop/script.js (excerpt)

// Remove the original element

$this.animate({

opacity: 0

}, 'fast').remove();

While that’s fading out, we want to initiate the animation. This is going to require a small amount of JavaScript-fu; we’re going to set up a self-contained, self-executing loop that plays the animation through once:

chapter_07/14_drag_drop/script.js (excerpt)

// Animate the puff of smoke

(function animate() {(1)

var count = $image.data('count');(2)

if (count) {(3)

var top = frame_count - count;

var height = $image.height() / frame_count;

$image.css({

"top": - (top * height),

'position': 'absolute'

});

$puff.css({

'height': height

})

$image.data("count", count - 1);(4)

setTimeout(animate, 75);(5)

} else {

$image.parent().remove();(6)

}

})();

Inside this function, we’re executing the animation. Here are the highlights:

(1)

We’ve wrapped the function in the (function myFunction(){})() construct, which is a way to create and execute an anonymous function that can nonetheless refer to itself by name. This is an odd JavaScript construct, and one that you needn’t worry about understanding completely; in this case it’s handy as it allows us to create a self-contained piece of functionality that can call itself (this will be useful when we use the setTimeout method).

(2)

We find out which frame we’re up to by checking the count data.

(3)

If there are still frames left to display, we calculate the offset of the image and move the correct frame into view. (We can use if (count) in this way because in JavaScript, the number 0 is equivalent to false.)

(4)

We decrease the frame count so that the next time the loop runs it will display the next frame in the series.

(5)

Finally, we call setTimeout, specifying our anonymous function as the callback. This way, after 75 milliseconds, the whole process will run again.

(6)

When the count reaches zero and the animation concludes, we remove