Need help Converting jQuery event to Drupal behavior

Question

I have a Drupal 7 website that uses jQuery animation for fadeIn div tags. I need an event to capture fadeIn when it is complete. I found a jQuery example that does what I need, but I have not been able to successfully convert it to Drupal 7 behavior, and I'm not quite sure what I could lose.

Script example

Below is my JS file the Drupal, fadeInEvent.js.

Drupal.behaviors.fadeInEvent= {
    attach: function (context, settings) {

        var _old = jQuery.fn.fadeIn;

        jQuery.fn.fadeIn = function() {
            var self = this;
            _old.apply(this.arguments).promise().done(function(){
                self.trigger('fadeIn');
            });
        };

        jQuery('.tab-pane').bind('fadeIn', function() {
             alert('fadeIn Done.');
        });

    }
};

In the above JS code, I never get a message saying that fadeIn has finished the item I selected.

Answer 1

In general, when using jQuery in mode, noconflictyou can use closure to access it with$

(function($) {
    // jQuery code using $ object.
}(jQuery));

.fadeIn(), :

/**
 * $.fn.fadeInNew plugin for triggering 'fadeInDone', when .fadeIn is done.
 *
 * @param speed
 * @param easing
 * @param callback
 * @returns {$.fn}
 */
$.fn.fadeInNew = function(speed, easing, callback) {

  var self = this;

  self.animate({
    opacity: "show"
  }, speed, easing, function() {
    self.trigger('fadeInDone');

    if ($.isFunction(callback)) {
      callback.apply(self);
    }
  });

  return self;
}

$('.tab-pane').on('fadeInDone', function() {
  alert('Alarm!');
});

$('.button').on('click', function(e) {
  $('.tab-pane').fadeInNew();
});

.tab-pane {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">Have a good day!</div>
<button class="button">Show something!</button>

Hide result

, .fadeInNew(), fadeInDone . - , . .

, Drupal.behaviors, - . attach , Drupal ajax, . includes/ajax.php