jQuery plugin help: custom callbacks

Question

I'm stumped trying to build this jQuery plug-in. The part I'm having trouble with is getting the custom callback function to fire.


    (function( $, window, document, undefined ) {

        // Function options

        var methods = {
            init   :  function( options ) {
                return this.each(function (){
                    methods.start(this, options);
                });
            },
            start  :  function( el, options ) {

                // Attach animationstart to selector

                $(document).on("animationstart", el, function(){
                    options.start.call();
                });

            }
        }

        // Plug-in code

        $.fn.plugin = function( options ) {

            if ( methods[options] ) {
                return methods[options].apply( this, Array.prototype.slice.call( arguments, 1 ));
            } else if ( typeof options === "object" || ! options ) {
                return methods.init.apply( this, arguments );
            } else {
                $.error( "Method" + options + " does not exist in plugin" );
            }

        };
    })( jQuery );


    // Attach to DOM object


    $('img').plugin({
      'start'  :  function(){
          console.log('Animation started');
      }
    });

Can anyone help me figure out why 'start' isn't firing the custom callback function?

Doesn't seem like you ever trigger the document's animationstart event — Explosion Pills
Doesn't that happen whenever a CSS3 animation starts on the DOM object? — humdinger
Ah, thanks for the clue. I'll have to look into the API some more. — humdinger

humdinger humdinger · Accepted Answer · 2013-01-17T22:33:39

Figured it out thanks to this post CSS3 transition event Listener with jQuery

Apparently there are browser specific events for animations.

jQuery plugin help: custom callbacks

1 Answers