View Full Version : New Opacity Question

12-29-2006, 10:03 AM
I want to amke something fade out, if and only if it is already set at 100% opacity.

I need to make a function that will allow me to do this.

Here is my current code

//Time=millisecond Start and End = Amount of Opac to start with. Id = which div to affect
function opacity(id, Start, End, time) {
//frame speed here
var speed = Math.round(time / 100);
var timer = 0;

if(Start > End) {
for(i = Start; i >= End; i--) {
setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));
} else if(Start < End) {
for(i = Start; i <= End; i++)
setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));

function Opac(opacity, id) {
var obj = document.getElementById(id).style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";

How would I write a function that would allow me to fade out if opacity was already 100, otherwise it does nothing?

12-29-2006, 11:26 AM
I was wondering the exact same thing a few days ago. You have to determine whether an element has opacity 100%, but also have to think about whether it doesn't have an opacity setting and is still displayed. There might be an easier way, but this is the function that determines if an object should be faded:

function setToOpaque (id) {
var object = document.getElementById(id).style;
var hasVisibility = new Boolean(getStyleById(id,'visibility'));
var setToVisible = new Boolean(getStyleById(id,'visibility') == 'visible');
var hasDisplay = new Boolean(getStyleById(id,'display'));
var setToDisplayed = new Boolean(getStyleById(id,'display') != 'none');
var isOpaque = new Boolean();
if (hasDisplay.valueOf() && hasVisibility.valueOf()) return (setToVisible.valueOf() && setToDisplayed.valueOf());
if (!hasDisplay.valueOf() && !hasVisibility.valueOf()) return true;
if (hasDisplay.valueOf() && !hasVisibility.valueOf()) return setToDisplayed.valueOf();
if (!hasDisplay.valueOf() && hasVisibility.valueOf()) return setToVisible.valueOf();

function hasOpacity100 (id) {
var object = document.getElementById(id).style;
if ((object.opacity==1 || object.filter=='alpha(opacity=100)' || object.MozOpacity==1 || object.KhtmlOpacity==1) && (setToOpaque(id))
MozOpacity is no longer necessary; it only ensure older versions of Mozilla work.
GetStyleById is a function that searches inline CSS as well as global settings. See http://developer.apple.com/internet/webcontent/styles.html

12-29-2006, 06:27 PM
I need to use MozOpacity, because I need all commonly used browsers to have the ability to view my Page.

This is for a competition.

I have it almost where I want.

function fade(id) {
var obj = document.getElementById(id).style;
if (obj.opacity>.99 || obj.filter>'alpha(opacity=99)' || obj.MozOpacity>.99 || obj.KhtmlOpacity>.99) {
opacity(id, 100, 0, 500)
else {
opacity(id, 1, 0, 500)

Whenever I start the function fade() my opacity instantly jumps to 100 before the opacity decrease. Is there a way that I can start the decrease from the current opacity.

What would I use to get the current opacity style?

I think this may have been what you were doing tipper, but I am not sure, as I don't completely understand your code. (Not saying its bad, I'm just in experienced.

12-29-2006, 09:46 PM
The flicker that you're talking about is a common problem when dealing with opacity issues. Have you read this page?


It has a lot of great info and solved my opacity issues on my own site. There are several places where it mentions ways to prevent the flicker that you mention. It also describes how to change opacity from any number to any other number. Take a look, I think it will help.