javascript – 需要帮助将jQuery事件转换为Drupal行为

我有一个Drupal 7网站,它使用jQuery动画来淡化div标签.我需要一个事件来在完成后捕获fadeIn.我找到了一个示例jQuery示例,它可以完成我所需要的,但是我无法将其成功转换为Drupal 7行为,而且我不太确定我可能缺少什么.

Fiddle Example

下面是我的Drupal JS文件,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.');
        });

    }
};

在上面的JS代码中,我从来没有得到fadeIn已完成我选择的项目的警报.

解决方法

首先,在noconflict模式下使用jQuery时,您可以使用闭包来访问$

(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,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>

由于我不喜欢覆盖任何库的本机方法的想法,我已经创建了一个插件.fadeInNew(),它将触发元素上的自定义fadeInDone事件.动画背后的代码与本机实现see the source here中的代码相同.

此外,您不需要使用Drupal.behaviors来定义类似的东西.你应该只使用附加到Drupal的ajax框架加载的东西,参见includes / ajax.PHP