JavaScript Opacity Object

Posted by santosj on July 26, 2006

The hardest part about JavaScript objects is that no one wants to help with them. Note, a lot of the JavaScript code is not mine. Well, only the setInterval usage and object method is, the rest was borrowed from other sources. Just search ‘JavaScript Fading’ on google.

/** Opacity Manager **/

function Opacity(id)
{
	this.opacity = 0;

	this.style = id.style;

	this.timer = null;
}

Opacity.prototype.setOpacity = function(value)
{
	if(value == 0) {
		this.style.display = 'none';
	} else {
		this.style.display = 'block';
	}

	this.style.opacity = (value / 100);
	this.style.MozOpacity = (value / 100);
	this.style.KhtmlOpacity = (value / 100);
	this.style.filter = "alpha(opacity=" + value + ")";
}

Opacity.prototype.Stop = function()
{
	clearInterval(this.timer);
	if(this.opacity > 0) {
		this.setOpacity(100);
	}
}

Opacity.prototype.FadeIn = function()
{
	var _this = this;

	this.timer = window.setInterval(function() { _this.FadeInTimer(); }, 10);
}

Opacity.prototype.FadeInTimer = function()
{
	if(this.opacity < 100) {
		this.opacity = this.opacity + 2;
		this.setOpacity(this.opacity);
		return false;
	} else {
		clearInterval(this.timer);
		return true;
	}
}

Opacity.prototype.FadeOut = function()
{
	var _this = this;

	this.timer = window.setInterval(function() { _this.FadeOutTimer(); }, 10);
}

Opacity.prototype.FadeOutTimer = function()
{
	if(this.opacity > 0) {
		this.opacity = this.opacity-2;
		this.setOpacity(this.opacity);
		return false;
	} else {
		clearInterval(this.timer);
		return true;
	}
}

Used as follows:

var opacity = new Opacity(document.getElementById('nameOfId'));

Or if you are in an element already.

<p mouseover="var opacity = new Opacity(this); opacity.Stop();">text</p>

On second thought, I’ve never tried the second example. Should work.

FadeInTimer and FadeOutTimer are ‘private’ functions, so you shouldn’t call them directly. SetOpacity, is technically a ‘private’ function, but there will be no harm if you call it directly.

this = Window

Why the hell does ‘this’ equal window? this doesn’t really follow scope very well, but I suppose it has something to do with the ability to use JS functions without calling their object. instead of window.setInterval, you could just use setInterval without the ‘window’ part. It does cause bugs and unexpected behavior unless you expect this to be window in the first place.

There has to be a better way than using alias of this for referencing the function scope ‘this’. Perhaps in JS 2.0? Probably not.

var _this = this;

Possibly Related Posts:


Projects

4 Comments.

  1. Ed November 7, 2006 at 6:17 pm

    Could you give an example on how to use incorporate this into a, HTML document? I am fairly new to this. Thanks

  2. Jacob Santos November 7, 2006 at 9:22 pm

    Another effect object should be used instead, I’m sorry to say. There is some risk of memory leakage. Which is of course true for other JS libraries as well.

    —————

    What I did instead of having it in the is place it in the page so that it would start as soon as possible.

    <script src="path/to/script.js" language="javascript"></script>
<p id="changeOpacity" onmouseover="var opacity = new Opacity(this); opacity.setOpacity(0); opacity.FadeIn();">
    Text here.
</p>
  3. Michael September 24, 2007 at 11:19 pm

    Thanks for posting this, it was very helpful.

    One fix though for you. Your fadeOut doesn’t work because the opacity value isn’t being set in the setOpacity function.

    So change setOpacity to:

    Opacity.prototype.setOpacity = function(value)
    {
    if(value == 0) {
    this.style.display = ‘none’;
    } else {
    this.style.display = ‘block’;
    }

    this.opacity = value;
    this.style.opacity = (value / 100);
    this.style.MozOpacity = (value / 100);
    this.style.KhtmlOpacity = (value / 100);
    this.style.filter = "alpha(opacity=" + value + ")";

    }

  4. Jacob Santos September 25, 2007 at 5:42 pm

    Not really, the methods that change this.opacity, is the *Timer(). The methods that should be called are FadeIn() and FadeOut(). I believe Stop() was for having both FadeIn() and FadeOut for another objects, but it never worked right.

    I actually use other JavaScript libraries, which handle opacity better than my class. If I had known more about JavaScript and programming in general, then this class would never have been created and this post would have been about using that JS library instead.