• Choose a category
• All
• Classic-Fiction

By Root 1152 0

When it reaches 0 (which is to say that all the hovers are done), we modify the event property type and set it to multihover, then call the internal handle function. This will cause any bound callbacks that the user has specified to be executed, just like a native event.

The special event is a beautiful way to wrap up custom events to be reused throughout your projects. As well as creating new functionality, like our multihover event, you can also redefine existing events; for example, you could overwrite the internal click event by providing the appropriate hooks to $.event.special.click. Creating special events is a relatively rare requirement—but when you do need them, you’ll see that they’re a killer advanced feature of jQuery.

A jQuery Ninja’s Miscellany

Even once we’ve explored the full-blown systems and frameworks on offer within jQuery, there are still countless treasures planted throughout the library for you to take advantage of. Some of these are well-documented functions, though perhaps quite specific; others are more obscure advanced topics.

Avoiding Conflicts

As we mentioned, the $ and jQuery objects and methods we use when writing our code are namespaces, just like those we’ve been creating ourselves. jQuery, as a namespace, scores well on the uniqueness and clarity fronts, and is also fairly short.

And while the dollar sign certainly scores points for shortness, it misses the mark widely on uniqueness. This lack of uniqueness can be cause for concern if another developer overwrites what we assume to be $. Prototype.js, for example, uses $() as shorthand for the JavaScript getElementById method, and if we’re careless, such namespacing conflicts can be catastrophic. To prepare for this occurrence, jQuery gives us access to noConflict:

jQuery.noConflict();

At its most basic, this means that jQuery will relinquish any rights to the $ namespace, but still respond to the jQuery namespace:

jQuery.noConflict();

// Do something with jQuery

jQuery("div p").hide();

// Do something with another library's $()

$("content").style.display = 'none';

This would mean that you’d have to remove any references to the $ in your code, replacing them with jQuery, and frankly that might be unfeasible. But there’s a way to ease that workload:

jQuery.noConflict();

(function($) {

$(function() {

// more code using $ as alias to jQuery

});

})(jQuery);

// other code using $ as an alias to the other library

By wrapping all our jQuery commands in an anonymous function and passing in references to jQuery and $, we create a shell that protects the jQuery methods and properties inside. And there’s yet another option available to us: a further trick we can employ is to assign noConflict’s return value to a variable, and use that instead of jQuery or $. In this case, we’ve chosen to use trkr as the jQuery alias:

var trkr = jQuery.noConflict();

// Do something with jQuery

trkr ("div p").hide();

// Do something with another library's $()

$("content").style.display = 'none';

There’s one further process we can use, and that’s to assign the noConflict to a new namespace:

var trkr = {};

trkr.$ = jQuery.noConflict(true);

Among all these options you’re bound to find a solution that will suit your needs!

Queuing and Dequeuing Animations

Despite the multitude of animation options you have at your disposal, sometimes they fall short of what you need; you might want an animation to pause, or perhaps have an element outside the animation react when the animation reaches a certain point. There are plenty of interesting moments in an animation sequence, and it would be nice to be able to harness them. And you can, with queue!

Generally speaking, actions we chain together on a selection are asynchronous, happening more or less at the same time:

chapter_09/16_queue_dequeue_animations/script.js (excerpt)

$('#button1').click(function() {

$(this).animate({

height: 200,

width: 200

}, 'slow').text("rollin'");

});

When you click that button, it will slowly grow to a size of 200x200 pixels, but the text will update almost