如下代码可以实现，不过你首先需要引用Jquery，我使用的是jquery-1.7.1.min.js
支持两个div或多个div的淡入淡出切换：
<div id="imgbox"><div style="width:100pxheight:100pxbackground-color:red"></div>
<div style="width:100pxheight:100pxbackground-color:blue"></div>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#imgbox div").fadeOut(0).eq(0).fadeIn(0)
var i = 0
setInterval(function(){
if($("#imgbox div").length > (i+1)){
$("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000)
i++
}
else{
$("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000)
i = 0
}
},2000)
})
</script>
网页元素一个一个删除，然后一个一个载入新网页的元素,这样子网页在过度过程中会出现变形和抖动。比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。
过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。
你把底下这段代码运行下：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle()
$("#div2").fadeToggle("slow")
$("#div3").fadeToggle(3000)
})
})
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80pxheight:80pxbackground-color:red"></div>
<br>
<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>
<br>
<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>
</body>
</body>
</html>
