Question

我有一个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已完成我所选项目的警告。

Answer 1

首先，在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, 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>

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

此外，您不需要使用Drupal.behaviors来定义类似的内容。您应该仅对使用Drupal的ajax框架加载的内容使用attach，请参阅includes/ajax.php

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

1 个答案: