2

I have a Drupal 7 web site that is using jQuery animations to fadeIn div tags. I need an event to capture a fadeIn when it is completed. I have found a sample jQuery example that does what I need it to, but I have not been able to successfully convert it to a Drupal 7 behavior and I'm not quite sure what I might be missing.

Fiddle Example

Below is my Drupal JS file, 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 my alert that the fadeIn has finished on the item I have selected.

  • My advice would be to take the monkey patching out of the behavior altogether (it doesn't belong there). You might just see it start to work after that – Clive Jul 17 '15 at 14:51
1

Alter don't show because in your code:

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

this function mean that when selecter .tab-pane fadeIn done, alert will show. But You don't call fadeIn => don't have event fadeIn. You need call that same:

jQuery('.tab-pane').fadeIn(2000);

And better function jQuery.fn.fadeIn need outside Drupal.behaviors.fadeInEvent

(function ($) {
    var _old = $.fn.fadeIn;
    $.fn.fadeIn = function(){
        var self = this;
        _old.apply(this,arguments).promise().done(function(){
            self.trigger("fadeIn");
        });
    };

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

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

then you call fadeIn() every where and have event fadeIn.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.