Question

I have this tested function below that works fine for fading an element in or out.

What do I gain by using JQuery?

Thanks

Effects.prototype.fade = function( direction, max_time,  element ) 
{
    var elapsed = 0;
    function next() {
        elapsed += 10;
        if (direction === 'up')
        {
            element.style.opacity = elapsed / max_time;
        }
        else if (direction === 'down')
        {
            element.style.opacity = (max_time - elapsed) / max_time;
        }
        if (elapsed <= max_time) {
            setTimeout(next, 10);
        }
    }
    next();
};

Running a search on fadeIn() on the core jquery library I get one hit here:

jQuery.each({
    slideDown: genFx( "show", 1 ),
    slideUp: genFx( "hide", 1 ),
    slideToggle: genFx( "toggle", 1 ),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" },
    fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        return this.animate( props, speed, easing, callback );
    };
});

Using the JQuery Source Viewer

function (prop, speed, easing, callback) {
    var optall = jQuery.speed(speed, easing, callback);
    if (jQuery.isEmptyObject(prop)) {
        return this.each(optall.complete, [false]);
    }
    prop = jQuery.extend({},
    prop);
    return this[optall.queue === false ? "each" : "queue"](function () {
        if (optall.queue === false) {
            jQuery._mark(this);
        }
        var opt = jQuery.extend({},
        optall),
            isElement = this.nodeType === 1,
            hidden = isElement && jQuery(this).is(":hidden"),
            name, val, p, display, e, parts, start, end, unit;
        opt.animatedProperties = {};
        for (p in prop) {
            name = jQuery.camelCase(p);
            if (p !== name) {
                prop[name] = prop[p];
                delete prop[p];
            }
            val = prop[name];
            if (jQuery.isArray(val)) {
                opt.animatedProperties[name] = val[1];
                val = prop[name] = val[0];
            } else {
                opt.animatedProperties[name] = opt.specialEasing && opt.specialEasing[name] || opt.easing || "swing";
            }
            if (val === "hide" && hidden || val === "show" && !hidden) {
                return opt.complete.call(this);
            }
            if (isElement && (name === "height" || name === "width")) {
                opt.overflow = [this.style.overflow, this.style.overflowX, this.style.overflowY];
                if (jQuery.css(this, "display") === "inline" && jQuery.css(this, "float") === "none") {
                    if (!jQuery.support.inlineBlockNeedsLayout) {
                        this.style.display = "inline-block";
                    } else {
                        display = defaultDisplay(this.nodeName);
                        if (display === "inline") {
                            this.style.display = "inline-block";
                        } else {
                            this.style.display = "inline";
                            this.style.zoom = 1;
                        }
                    }
                }
            }
        }
        if (opt.overflow != null) {
            this.style.overflow = "hidden";
        }
        for (p in prop) {
            e = new jQuery.fx(this, opt, p);
            val = prop[p];
            if (rfxtypes.test(val)) {
                e[val === "toggle" ? hidden ? "show" : "hide" : val]();
            } else {
                parts = rfxnum.exec(val);
                start = e.cur();
                if (parts) {
                    end = parseFloat(parts[2]);
                    unit = parts[3] || (jQuery.cssNumber[p] ? "" : "px");
                    if (unit !== "px") {
                        jQuery.style(this, p, (end || 1) + unit);
                        start = (end || 1) / e.cur() * start;
                        jQuery.style(this, p, start + unit);
                    }
                    if (parts[1]) {
                        end = (parts[1] === "-=" ? -1 : 1) * end + start;
                    }
                    e.custom(start, end, unit);
                } else {
                    e.custom(start, val, "");
                }
            }
        }
        return true;
    });
}

Answer 1

Usually you don’t include a library like jQuery just for a single effect, but as a general purpose library in order to simplify things such as DOM manipulation, AJAX calls, setting CSS properties in a way that’s cross-browser, in addition to applying effects (such as .fadeIn/.fadeOut) and other applications.

Tipically it’s recommended you don’t add jQuery for just a simple call. But my reasoning is that you are probably be going to exploit more and more of it’s features in the long run, so I don’t see a real reason not to use it.

On the subject of implementing your own fadeIn or fadeOut functions, you could look at the jQuery source and extract those methods, or make your own implementation from scratch. But given the fact that jQuery already implemented this method, I don’t see why you would want to replicate it, other than for educational purposes.