jQuery FX Effects - Ported from ZeptoJS

fx.js

//     Zepto.js
//     (c) 2010-2012 Thomas Fuchs
//     Zepto.js may be freely distributed under the MIT license.
(function ($, undefined) {
    var prefix = '', eventPrefix, endEventName, endAnimationName,
        vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },
        document = window.document, testEl = document.createElement('div'), docElem = document.documentElement,
        supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
        transform,
        transitionProperty, transitionDuration, transitionTiming,
        animationName, animationDuration, animationTiming,
        origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle,
        cssReset = {};

    function dasherize (str) {
        return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2'));
    }

    function downcase (str) {
        return str.toLowerCase();
    }

    function normalizeEvent (name) {
        return eventPrefix ? eventPrefix + name : downcase(name);
    }

    $.each(vendors, function (vendor, event) {
        if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
            prefix = "-" + downcase(vendor) + "-";
            eventPrefix = event;
            return false;
        }
    });

    transform = prefix + "transform";
    cssReset[transitionProperty = prefix + "transition-property"] =
    cssReset[transitionDuration = prefix + "transition-duration"] =
    cssReset[transitionTiming   = prefix + "transition-timing-function"] =
    cssReset[animationName      = prefix + "animation-name"] =
    cssReset[animationDuration  = prefix + "animation-duration"] =
    cssReset[animationTiming    = prefix + "animation-timing-function"] = "";

    $.fx = {
        off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
        speeds: { _default: 400, fast: 200, slow: 600 },
        cssPrefix: prefix,
        transitionEnd: normalizeEvent('TransitionEnd'),
        animationEnd: normalizeEvent('AnimationEnd')
    };

    $.fn.animate = function (properties, duration, ease, callback) {
        if (duration !== null && typeof duration === 'object') {
            ease = duration.easing;
            callback = duration.complete;
            duration = duration.duration;
        }
        if (duration) {
            duration = (typeof duration == "number" ? duration : ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000;
        }
        return this.anim(properties, duration, ease, callback);
    };

    $.fn.anim = function (properties, duration, ease, callback) {
        var key, cssValues = {}, cssProperties, transforms = '',
            that = this, wrappedCallback, endEvent = $.fx.transitionEnd;

        if (duration === undefined) {
            duration = 0.4;
        }

        if ($.fx.off) {
            duration = 0;
        }

        if (typeof properties == 'string') {
            // keyframe animation
            cssValues[animationName] = properties;
            cssValues[animationDuration] = duration + "s";
            cssValues[animationTiming] = (ease || "linear");
            endEvent = $.fx.animationEnd;
        } else {
            cssProperties = [];
            // CSS transitions
            for (key in properties) {
                if (supportedTransforms.test(key)) {
                    transforms += key + "(" + properties[key] + ") ";
                } else {
                    cssValues[key] = properties[key];
                    cssProperties.push(dasherize(key));
                }
            }
        }

        if (transforms) {
            cssValues[transform] = transforms;
            cssProperties.push(transform);
        }
        if (duration > 0 && typeof properties === "object") {
            cssValues[transitionProperty] = cssProperties.join(", ");
            cssValues[transitionDuration] = duration + "s";
            cssValues[transitionTiming] = (ease || "linear");
        }

        wrappedCallback = function (event) {
            if (typeof event !== "undefined") {
                if (event.target !== event.currentTarget) {
                    return; // makes sure the event didn't bubble from "below"
                }
                $(event.target).off.apply($.fn, arguments);
            }
            $(this).css(cssReset);
            callback && callback.call(this)
        };

        if (duration > 0) {
            this.on(endEvent, wrappedCallback);
        }

        // trigger page reflow so new elements can animate
        this.size() && this.get(0).clientLeft;
        this.css(cssValues);

        if (duration <= 0) {
            setTimeout(function () {
                that.each(function () {
                    wrappedCallback.call(this);
                });
            }, 0);
        }

        return this;
    };

    testEl = null;

    function anim (el, speed, opacity, scale, callback) {
        if (typeof speed == "function" && !callback) {
            callback = speed;
            speed = undefined;
        }
        var props = { opacity: opacity };
        if (scale) {
            props.scale = scale;
            el.css($.fx.cssPrefix + "transform-origin", "0 0");
        }
        return el.animate(props, speed, null, callback);
    }
    
    function hide (el, speed, scale, callback) {
        return anim(el, speed, 0, scale, function (){
            origHide.call($(this))
            callback && callback.call(this)
        });
    }
    
    $.fn.show = function (speed, callback) {
        origShow.call(this);
        if (speed === undefined) {
            speed = 0;
        } else {
            this.css("opacity", 0);
        }
        return anim(this, speed, 1, "1,1", callback);
    };
    
    $.fn.hide = function (speed, callback) {
        if (speed === undefined) {
            return origHide.call(this);
        } else {
            return hide(this, speed, "0,0", callback);
        }
    };
    
    $.fn.toggle = function (speed, callback) {
        if (speed === undefined || typeof speed == "boolean") {
            return origToggle.call(this, speed);
        } else {
            return this.each(function () {
                var el = $(this);
                el[el.css("display") == "none" ? "show" : "hide"](speed, callback);
            });
        }
    };
    
    $.fn.fadeTo = function (speed, opacity, callback) {
        return anim(this, speed, opacity, null, callback);
    };
    
    $.fn.fadeIn = function (speed, callback) {
        var target = this.css("opacity");
        if (target > 0) {
            this.css("opacity", 0);
        } else {
            target = 1;
        }
        return origShow.call(this).fadeTo(speed, target, callback);
    };
    
    $.fn.fadeOut = function (speed, callback) {
        return hide(this, speed, null, callback);
    };
    
    $.fn.fadeToggle = function (speed, callback) {
        return this.each(function () {
            var el = $(this);
            el[
                (el.css("opacity") == 0 || el.css("display") == "none") ? "fadeIn" : "fadeOut"
                ](speed, callback);
        });
    };
}(jQuery));