Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

356
CHAPTER 10 ■ EXTENDING JQUERY
■ Note The .dequeue() method takes the current animation out of the animation queue, preventing the
animation from jumping to the end when the queue is cleared with .clearQueue(). Allowing the queue to build up
can cause the animated element to look jumpy or to perform the animation many times in rapid succession, which
is definitely an undesirable effect.
Modifying Each Matched Element
Because the .each() method accepts a callback, you can easily modify each matched element in the
jQuery object being processed. For the dateZoom plugin, you’ll add hover event handlers to each selected
element.
When a user hovers her mouse over an element to which dateZoom has been applied, the zoom
method will run. This method relies on the fontsize property of the defaults object to enlarge the text
appropriately. When the user stops hovering, the original text size will be passed to zoom, and the
element’s text will return to its original size.
To store the original size, use the .css() method and place the original font size in a private
variable.
You use the .hover() method to implement this functionality by inserting the following bold code
into the dateZoom plugin:
(function($){
// A plugin that enlarges the text of an element when moused
// over, then returns it to its original size on mouse out
$.fn.dateZoom = function(options)
{
// Only overwrites values that were explicitly passed by
// the user in options
var opts = $.extend($.fn.dateZoom.defaults, options);
};
// Loops through each matched element and returns the
// modified jQuery object to maintain chainability
return this.each(function(){
// Stores the original font size of the element
var originalsize = $(this).css("font-size");
// Binds functions to the hover event. The first is
// triggered when the user hovers over the element, and
// the second when the user stops hovering
$(this).hover(function(){
$.fn.dateZoom.zoom(this, opts.fontsize, opts);
},
function(){
$.fn.dateZoom.zoom(this, originalsize, opts);
});
});