我已经有了我的javascript来替换另一个div，我只想知道当一个div被另一个div替换时如何放置淡入/淡出过渡。为了让您更好地了解我要完成的任务，用户在页面打开时有3个选项。他们可以点击营销链接，遗产链接或婚礼链接，然后将它们带到相应的div，询问他们是否需要工作样本或是否愿意与我们联系。正如我所说的那样，它完美地工作，当点击第一个链接时，我只想将divs fadeIn / FadeOut。
<!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>
答案 0 :(得分：0)
如果您想使用vanilla 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);
})()
}
}