JavaScript fading in/out script when fading in one, fade out others

Krentenbol · 12-04-2012, 03:25 PM

I got this code:

Code:

var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
	var target = document.getElementById(element);
	target.style.display = "block";
	var newSetting = fade_in_from / 10;
	target.style.opacity = newSetting;
	// opacity ranges from 0 to 1
	fade_in_from++;
	if(fade_in_from == 10){
		target.style.opacity = 1;
		clearTimeout(loopTimer);
		fade_in_from = 0;
		return false;
		
	}
	var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
	var target = document.getElementById(element);
	var newSetting = fade_out_from / 10;
	target.style.opacity = newSetting;
	fade_out_from--;
	if(fade_out_from == 0){
		target.style.opacity = 0;
		clearTimeout(loopTimer);
		fade_out_from = 10;
		return false;
	}
	var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}

And for example when div1 fades in, I want div2 and div3 fade out.

I tried something and put this within the fadeIn function without any result.

if(target == 'div1') {
fadeOut('div2');
fadeOut('div3');
}

Could someone help me?

Many thanks.

sunfighter · 12-04-2012, 05:27 PM

Two answers for you. The first is the hardest, it trys to do all the fade ins and out at the same time. What I did instead of fading thee divs I put the dive that had to go in a master div and faded that out. And put the one that you wanted to fade in behind the master and it just appears as the master fades out. Had to use position:absolute; which I don't like to do.

Code:

<body>
<div id="master" style="width: 360px;height: 250px; float:left; position:absolute; left:0px; z-index: 100; display: block;">
<div id="mine" style="width: 120px;height: 250px; background-color:blue;float:left; display: block;"></div>
<div id="yours" style="width: 120px;height: 250px; background-color:red;float:left;display: block;"></div>
<div id="ours" style="width: 120px;height: 250px; background-color:white;float:left;display: block;"></div>
</div>
<div style="width: 120px;height: 250px; position: absolute;left: 240px; z-index: 50;  background-color:green;float:left;display: block;"></div>
<div style="clear:both;">
<input type="button" style="position:absolute; left:0px;top: 266px;" onclick="fadeOut('master');" value="PUSH" />
</div>
</body>

If you don't care about them fading together than you can do this:

Code:

<body>

<div id="mine" style="width: 120px;height: 250px; background-color:blue;float:left; display: block;"></div>
<div id="yours" style="width: 120px;height: 250px; background-color:red;float:left;display: block;"></div>
<div id="ours" style="width: 120px;height: 250px; background-color:green;float:left;display: none;"></div>
<div style="clear:both;">
<input type="button" onclick="fadeOut('mine');fadeOut('yours');fadeIn('ours');" value="PUSH" />
</div>
</body>

Krentenbol · 12-04-2012, 07:05 PM

Hmm this is probably gonna help me out! Many thanks, I am going to use a combination of both.