The jQuery's bind() method allows us to define our custom events as simple but powerful inline functions. A custom event has a name (specified between quotes) and a callback function that defines its behavior. Custom events can be invoked using the trigger() method. Let's see an example.
Suppose that we want to attach a custom event only to animated elements whose CSS positioning is either relative or absolute. Here's how we can do:
var counter = 0;
$('#test').bind('animating', function() {
counter++;
if($(this).is(':animated')) {
if($(this).css('position') != 'static') {
console.log('Animation ' + counter );
}
}
});
Our event is called animating and we can use it as follows:
$('#test').click(function() {
$(this).animate({
left: 100
}, 'slow', function() {
$(this).trigger('animating');
$(this).animate({
left: 0
}, 'slow', function() {
$(this).trigger('animating');
});
});
});
And this is the result:
