5

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;
    });
}
13
  • 9
    1. You don't have to write it. 2. You don't have to write it. 3. You don't have to... well :) Consider that "writing it" also implies "accounting for browser quirks". It also nicely fits into the rest of the jQuery effect model for chaining, etc.
    – user166390
    Mar 16, 2012 at 23:41
  • Just download the jQuery developer source and extract the fadeIn function. jQuery's fadeIn does something similar to your function but it performs better under load, trying to keep to timing constraints. Also, the entire animate library is quite well designed and stuff just works.
    – Halcyon
    Mar 16, 2012 at 23:42
  • from what i observed before, jQuery uses timers (setTimeout) to recursively call the function. that way, your UI won't lock-up during the transitioning.
    – Joseph
    Mar 16, 2012 at 23:45
  • @Joseph - that's what I do to...where can I find the JQuery implementation?
    – user656925
    Mar 16, 2012 at 23:46
  • 1
    @Guy Montag the function is animate() that runs in the callback and takes care of most things. If you're using jQuery already there's no reason to reinvent the wheel, use the function that it provides.
    – elclanrs
    Mar 16, 2012 at 23:49

2 Answers 2

6

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.

2
  • You can't extract from jQuery - look at the source above and how many ways it branches...it is not modular.
    – user656925
    Apr 10, 2012 at 16:00
  • well, you could get the idea from it.
    – bevacqua
    Apr 10, 2012 at 18:36
5

The biggest reason to use JQuery over your custom code, in my opinion, is that you don't have to maintain the code for multiple browsers and multiple versions. JQuery does a good job of handling the quirks of the major browsers for you.

In addition, there are many other excellent uses for JQuery that you may want to use later.

Concerning the code, when you download JQuery: http://docs.jquery.com/Downloading_jQuery you can get the uncompressed version, which is intended to be readable.

I don't know of a simple way to get only those functions out of JQuery. Why not use the full library?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.