title: Custom function for animate.css causing problems
body: <p>I'm using the <code>animate.css</code> library for my project. I thought it would be easier to create a jQuery function that would do most of the work for me. Here is the function:</p>
  
  <pre><code>$(function () {    
      $.fn.extend({
          animateCss: function (animationName, callback) {
              var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
              this.addClass('animated ' + animationName).one(animationEnd, function () {
                  $(this).removeClass('animated ' + animationName);
                  if(callback){
                      callback();
                  };
              });
          }
      });
  
  });
  </code></pre>
  
  <p>It works, I can call it from jQuery objects. The problem is that when I pass in a callback function from one object, it gets called, but the same function from that object gets called again when ANOTHER object calls the function without passing in a callback.</p>
  
  <p>I'm not quite sure how this can happen, I come from a Java background. Is there some way that this function can retain the callback variable passed in for other objects?</p>