单击链接后淡出时淡入div

Question

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. 我已经有我的JavaScript，可以将一个div替换为另一个div，我只想知道当一个div替换为另一个div时如何放置淡入/淡出过渡。 To give you a better idea of what I am trying to accomplish, the user has 3 options when the page opens. 为了让您更好地了解我要完成的工作，页面打开时，用户有3个选项。 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. 他们可以单击市场营销，传统或婚礼链接，然后将其带到相应的div，该div询问他们是否需要样品或是否想与我们联系。 As I have said, it works perfectly, I would just like the divs to fadeIn/FadeOut when the first links are clicked. 就像我说过的那样，它非常完美，我希望在单击第一个链接时div淡入/淡出。

<!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>

Answer 1

If you want to use vanilla javascript, try something like this (I've wrote it from my mind, not tested though): 如果您想使用普通的javascript，请尝试这样的操作（我从脑海中写下来，尽管未测试）：

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);
        })()
    }
}

单击链接后淡出时淡入div

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-03-13 21:43:28

单击链接后淡出时淡入div

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-03-13 21:43:28

解决方案1
0 已采纳 2014-03-13 21:43:28