问题描述
我有一个Drupal 7网站，它使用jQuery动画来淡化div标签。 我需要一个事件来在完成后捕获fadeIn。 我找到了一个示例jQuery示例，它可以完成我所需要的，但是我无法将其成功转换为Drupal 7行为，而且我不太确定我可能缺少什么。
下面是我的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已完成我选择的项目的警报。
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事件。
动画背后的代码与本机实现中相同， 。
此外，您不需要使用Drupal.behaviors来定义类似的东西。
你应该只使用attach到Drupal的ajax框架加载的东西，参见includes/ajax.php