Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 592 Times in 591 Posts
    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>
    Last edited by sunfighter; 12-04-2012 at 05:31 PM.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hmm this is probably gonna help me out! Many thanks, I am going to use a combination of both.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •