JQuery_ Novice to Ninja - Earle Castledine [146]
chapter_09/16_queue_dequeue_animations/script.js (excerpt)
$('#button2').click(function() {
$(this).animate({
height: 200,
width: 200
}, 'slow').queue(function() {
$(this).text('rolled!');
}).text("rollin'");
});
Now the animate and text actions happen together, but the queue also changes the text once the animation has concluded. And it doesn’t stop there … or more accurately, it does! If we add another animate action to the chain, the queue will hold the fx stack and will stop the chained action from proceeding:
chapter_09/16_queue_dequeue_animations/script.js (excerpt)
$('#button3').click(function() {
$(this).animate({
height: 200,
width: 200
}, 'slow').queue(function() {
$(this).text('rolled!');
}).text("rollin'").animate({ // This animate won't fire
height: 100,
width: 100
}, 'slow');
});
The queue action now needs some help to release the stack once more. Just as live has die, and animate has stop, queue also has its opposite: dequeue.
The dequeue method is just a little peculiar; rather than being linked into the jQuery chain, the dequeue action is called from within queue’s callback:
chapter_09/16_queue_dequeue_animations/script.js (excerpt)
$('#button4').click(function() {
$(this).animate({
height: 200,
width: 200
}, 'slow').queue(function() {
$(this).text('rolled!');
$(this).dequeue();
}).text("rollin'").animate({ // This animate won't fire
height: 100,
width: 100
}, 'slow');
});
When we click the button now, its text will change to “rollin’,” it will grow to 200x200; then its text will change to “rolled,” and finally it will shrink to 100x100. Not an animation that will change your world, perhaps, but queue will likely change the way you look at animations.
Treating JavaScript Objects as jQuery Objects
jQuery works by selecting DOM elements and then acting on them. But a little-known secret is that jQuery can act on more than just the DOM; it can be applied to regular JavaScript objects as well. This is less a deliberate feature than a consequence of the library’s internal design. Although at first glance it might appear a little bizarre (why would you want to slideUp a JavaScript object?), it does have some potentially interesting ramifications.
First off, though: of course it’s impossible to slideUp a JavaScript object—after all, it lacks a height property, or any visible properties for that matter. But you can nonetheless select it just as if it were a DOM element:
$(myobj);
There are a number of jQuery actions unrelated to visual properties, but which we could imagine employing on a generic object. For example, the amazingly useful data action is used to store arbitrary data against the selected element. We can use this to add metadata to any object in our code. For example, we could establish a bidirectional link between two JavaScript objects. In the example below, we want to store additional information on a map. The map holds locator pins for the locations of celebrities, and we want to attach additional information to the locator that can be retrieved when the pin is clicked:
// Our map pin location's meta data
var locationData = {
name : "Bourgeois Burger Cafe",
celebCount : 3,
lat : latitude,
lon : longitude,
}
// Get a pin locator from our fictional mapping service
var locator = Map.getLocator(latitude, longitude);
We have two objects: the third party locator pin object, and our locationData object that contains data relating to the pin. If we select the locator with jQuery, we can apply the data action and attach the locationData object. Internally jQuery will store the relationship in the data store—so neither object is actually modified:
// Attach our data object to the JavaScript pin object
$(locator).data('pin_data', locationData);
Now at a future point when the user clicks on the map and the locator’s click