1
\$\begingroup\$

This is a plugin I wrote a while ago and I'm trying to improve it. Is this the best practice for jQuery plugins? Should I use options for flexibility?

The initial aim was to replicate the syntax for .fadeIn() in jQuery.

Any pointers would be appreciated.

/* AnimateCSS - CSS transitions instead of js */
(function ($, window, document, undefined) {

    // Function-level strict mode syntax
  'use strict';

    $.fn.animateCSS = function (effect, delay, callback) {

        // Return this to maintain chainability
        return this.each(function () {

            // Cache $(this) for speed and compression
            var $this = $(this),
                transitionEnd = "webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd",
                animated = "animated",
                visibility = "visibility",
                visible = "visible",
                hidden = "hidden";

            // Create a function we can call later
            function run() {
                // Add the animation effect with classes
                $this.addClass( animated + " " + effect);

                // Check if the elemenr has been hidden to start with
                if ($this.css( visibility ) === hidden) {
                    // If it has, show it (after the class has been added)
                    $this.css( visibility, visible);    
                }

                // If the element is hidden
                if ($this.is(":" + hidden)) {
                    // Show it
                    $this.show();
                }

                // Event triggered when the animation has finished
                $this.bind( transitionEnd, function () {
                    // Remove the classes so they can be added again later
                    $this.removeClass(animated + " " + effect);

                    // Add a callback event
                    if (typeof callback === "function") {
                        // Execute the callback
                        callback.call(this);

                        // Unbind the event handlers
                        $this.unbind( transitionEnd );
                    }   
                });   
            }  
            // Check if delay exists or if it"s a callback

            if (!delay || typeof delay === "function") {   
                // If it"s a callback, move it to callback so we can call it later
                callback = delay;    

                // Run the animation (without delay)
                run();
            } else {
                // Start a counter so we can delay the animation if required
                setTimeout( run, delay );
            }
        });
    };
})(jQuery, window, document);
\$\endgroup\$
2
\$\begingroup\$

Awesome code,

  • Well named variables, commented and easy tor read
  • JsHint.com has nothing on this code
  • Use 'use strict'
\$\endgroup\$

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.