So we monly e across faded objects that cannot be used on the Internet, such as a text-box that has a gray/faded appearance that cannot be clicked in and typed into.

I would like to do the same with a CSS object, which would later be un-faded and enabled to be used.

Any help would be appreciated.

Thanks!

So we monly e across faded objects that cannot be used on the Internet, such as a text-box that has a gray/faded appearance that cannot be clicked in and typed into.

I would like to do the same with a CSS object, which would later be un-faded and enabled to be used.

Any help would be appreciated.

Thanks!

• javascript
• jquery
• jquery-animate

3 Answers 3

You mean something like:

$(element).fadeTo('fast', 0.5).attr('disabled', 'disabled');

Note that this assumes jQuery.

Is there a fade + disable plugin in jQuery?

jQuery plugin

(function($) {
    $.fn.fadeAndDisable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(0.5, delay, function() {
                $(this).attr('disabled', 'disabled');
            })
        });
    }

    $.fn.fadeAndEnable = function(delay) {
        delay = delay || 500;
        return this.each(function() {
            $(this).fadeTo(1, delay, function() {
                $(this).removeAttr('disabled');
            })
        });
    }

})(jQuery);

jsFiddle.

Usage

$('input').fadeAndDisable(1000);
$('input').fadeAndEnable(1000);

You may want to extend this to allow callbacks, which is trivial to add.

You can either use animate() or fadeout() and then you can include option to disable..