jQuery: custom events

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:

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.