Fade In div when one fades out after link clicked

StackOverflow https://stackoverflow.com/questions/22391026

  •  14-06-2023
  •  | 
  •  

Domanda

I already have my javascript in place to replace one div for the other, I just want to know how to place a fade in/fade out transition when one div is replaced with the other. To give you a better idea of what I am trying to accomplish, the user has 3 options when the page opens. They can click either the marketing, legacy or wedding links which then brings them to the corresponding div which asks them if they want samples of work or if they would like to contact us. As I have said, it works perfectly, I would just like the divs to fadeIn/FadeOut when the first links are clicked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Legacy Media Calgary Service - Blooper Reel</title>
        <link href="css/chooseyourproject.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
            function MM_swapImgRestore() { //v3.0
             var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            function MM_preloadImages() { //v3.0
             var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
             var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }

            function MM_findObj(n, d) { //v4.01
             var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
              d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
             if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
             for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
             if(!x && d.getElementById) x=d.getElementById(n); return x;
            }

            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
           if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
        </script>

  <script type = "text/javascript">
function changeDiv(i){
   if(i==1) {
        document.getElementById("questions").style.display="none";
        document.getElementById("LegacyQuestions").style.display="block";
   } else if (i==2) {
        document.getElementById("questions").style.display="none";
        document.getElementById("MarketingQuestions").style.display="block";
   } else if (i==3) {
       document.getElementById("questions").style.display="none";
        document.getElementById("WeddingQuestions").style.display="block";
   }
}
</script>

</head>

<body onload="MM_preloadImages('images/first_legacy_on.png','images/first_marketing_on.png','images/first_weddings_on.png','images/First_samples_on.png','images/first_contactUs_on.png')">

<div id="body">

    <div id="topspace"></div>

  <div id="title"></div> 

    <div id="questions">
      <div id="whatWouldYouMake"></div>
        <div id="linkspace">
          <div id="leftlinks"></div>
            <div id="legacyLink"><a href="#" onclick="changeDiv(1)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy','','images/first_legacy_on.png',1)"><img src="images/first_legacy_off.png" width="174" height="80" id="Legacy" /></a></div>
          <div id="marketinglink"><a href="#" onclick="changeDiv(2)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Link','','images/first_marketing_on.png',1)"><img src="images/first_marketing_off.png" width="218" height="80" id="Marketing Link" /></a></div>
          <div id="weddinglink"><a href="#" onclick="changeDiv(3)" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/first_weddings_on.png',1)"><img src="images/first_weddings_off.png" width="222" height="80" id="Image3" /></a></div>
          <div id="rightLinks"></div>
            <div id="linkfooter"></div>
        </div>
      <div id="underLinks"></div>
  </div>

  <div id="LegacyQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/legacyprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LegacyProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="LegacyProjects" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/legacycontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Legacy Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Legacy Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

   <div id="MarketingQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/marketingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Projects Link','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="Marketing Projects Link" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/marketingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Marketing Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Marketing Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

   <div id="WeddingQuestions">
        <div id="WouldYouLike"></div>
        <div id="secondLinkSpace">
            <div id="secondLeftSpace"></div>
            <div id="secondSamplesLink"><a href="www.legacymediacalgary.com/weddingprojects.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WeddingProjects','','images/First_samples_on.png',1)"><img src="images/First_samples_off.png" width="238" height="82" id="WeddingProjects" /></a></div>
            <div id="secondContactUs"><a href="www.legacymediacalgary.com/weddingcontact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wedding Contact Us','','images/first_contactUs_on.png',1)"><img src="images/first_contactUs_off.png" width="268" height="82" id="Wedding Contact Us" /></a></div>
            <div id="secondrightSpace"></div>
            <div id="secondLinkFooter"></div>
        </div>
   </div>

</div>
</body>
</html>
È stato utile?

Soluzione

If you want to use vanilla javascript, try something like this (I've wrote it from my mind, not tested though):

function changeDiv(i) {
    var questions = document.getElementById("questions"),
        legacy = document.getElementById("LegacyQuestions"),
        marketing = document.getElementById("MarketingQuestions"),
        wedding = document.getElementById("WeddingQuestions");

    if(i==1) {
        var questionsOpacity = 1, // start value for questions opacity
            legacyOpacity = 0; // start value for legacy opacity

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1; // decrease every 30 ms questions' opacity
            legacy.style.opacity = legacyOpacity += 0.1; // increase every 30ms legacy's opacity

            // If questions's opacity is smaller than 0 and legacy's opacity greater than 1
            // we should add display none on questions div and display block on legacy div
            if (questionsOpacity < 0 && legacyOpacity > 1) {
                questions.style.display = "none";
                legacy.style.display = "block";
            }
            // Is questions' opacity still greater than 0 or legacy's opacity smaller than 1?
            // Then it means we still can minimize questions div's opacity and increase legacy div's opacity...
            else
                setTimeout(fade_in_out, 30);
        })()
   } else if (i==2) {
        var questionsOpacity = 1,
            marketingOpacity = 0;

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1;
            marketing.style.opacity = marketingOpacity += 0.1;

            if (questionsOpacity < 0 && marketingOpacity > 1) {
                questions.style.display = "none";
                marketing.style.display = "block";
            }
            else
                setTimeout(fade_in_out, 30);
        })()
    } else if (i==3) {
        var questionsOpacity = 1,
            weddingOpacity = 0;

        (function fade_in_out() {
            questions.style.opacity = questionsOpacity -= 0.1;
            wedding.style.opacity = weddingOpacity += 0.1;

            if (questionsOpacity < 0 && weddingOpacity > 1) {
                questions.style.display = "none";
                wedding.style.display = "block";
            }
            else
                setTimeout(fade_in_out, 30);
        })()
    }
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top