Increase opacity not working (but decrease does, confusing)

[joe92]

I am creating a function to make items fade into or out of the screen. It works perfectly for the fade out but wont work properly for the fade in.

 

Here is the function:

/*fade item in or out of page*/
function fade(id, direction){
/*check to see if the display is set to none, if so, set to inherit display*/
if(document.getElementById(id).style.display == 'none')
	{
		document.getElementById(id).style.display = 'inherit';
	}
/*fade into screen*/
if(direction == 'in')
	{
		var opacity1 = document.getElementById(id).style.opacity;
		document.getElementById(id).style.opacity = opacity1 + 0.08;
		var timer1 = setTimeout("fade('" + id + "', 'in')", 50);
		/*if the opacity is solid set it to a standard 0.99 and end timer*/
		if(opacity1 >= 0.99)
			{
				clearTimeout(timer1);
				document.getElementById(id).style.opacity = '0.99';
			}
	}
/*fade out of screen*/
else if(direction == 'out')
	{
		var opacity2 = document.getElementById(id).style.opacity;
		document.getElementById(id).style.opacity = opacity2 - 0.08;
		var timer2 = setTimeout("fade('" + id + "', 'out')", 50);
		/*if the opacity has hit zero or below set the display to none and reset opacity to zero*/
		if(opacity2 <= 0)
			{
				clearTimeout(timer2);
				document.getElementById(id).style.display = 'none';
				document.getElementById(id).style.opacity = '0';
			}
	}
}

 

Here is the HTML I am testing it with:

<div id="fadeTest" style="border:solid 2px #000; width:10em; height:10em; margin-top:5em; margin-left:5em; background-color:#33BB77; opacity:0.99;" onclick="fade('fadeTest', 'out');">
Fade Out
</div>
<a class="nWhite" onclick="fade('fadeTest', 'in');">Fade In</a>

 

 

If I click to fade the item off the screen it all works fine with no errors displayed. However, if I then click to fade onto the screen it will not work. After some testing I have realised that it will only increase the opacity if it is equal to 0. Which is why it will increase the opacity by 0.08 one time only if I click fade in after having clicked the fade out before. However, I don't understand why this is the case? How can it work with decreasing the opacity and yet be so fussy with increasing the opacity?

 

Any help is greatly appreciated.

Joe

[sunfighter]

Your anchor doesn't work  So I replaced with a button.

<input type="button" value="click this" onclick="fade('fadeTest', 'in');" />

 

 

This helps but does not fix. You can not make div appear if it's there so you first hit the fade button. That sets your display to none so you need to over come that by resetting it. - these lines

 

	if(direction == 'in')
	{
		var opacity1 = document.getElementById(id).style.opacity;
		document.getElementById(id).style.display = 'block';  // HERE<<<====

 

If you get the image to appear stronger than what this does please post solution so I can see.

Thank you

 

[sunfighter]

You can't correct what you write in haste. 

 

So I had to work on this so not to appear as a dummy 

 

Change this line and got it working:

	
if(direction == 'in')
	{
		var opacity1 = parseFloat(document.getElementById(id).style.opacity);  // <<===  added parseFloat

[joe92]

Haha, sorry, posted it at the end of day.

 

That code works brilliantly! Thank you very much! :D