javascript 淡出淡入

JavaScript淡出淡入是一个常见的网页特效，在页面加载时或操作过程中，有时需要隐藏或显示某个元素，此时淡出淡入的效果可以使页面更加美观和友好。

实现淡出淡入的方法有多种，但其中使用CSS3和JavaScript实现是较为简单和常用的两种。下面先介绍使用CSS3的方法：

/* CSS3实现 */
.fade-out{
opacity: 0;
transition: opacity .5s ease;
}
.fade-in{
opacity: 1;
transition: opacity .5s ease;
}

以上代码实现了一个淡出和淡入的效果，前半部分的opacity属性用于设置元素的透明度，值为0时元素完全透明，值为1时元素完全不透明，其中transition属性用于设置由隐藏到显示或由显示到隐藏时的过渡动画效果，其中的.5s表示过渡时间为0.5秒，ease则表示动画效果渐变缓慢。

使用JavaScript实现淡出淡入的效果也很简单，下面是一个例子：

// 定义一个淡出函数
function fadeOut(elem){
var opacity = 1;
setInterval(function(){
if(opacity<= 0){
clearInterval(fadeOutTimer);
elem.style.display = "none";
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
opacity -= 0.1;
}, 50);
}
// 定义一个淡入函数
function fadeIn(elem){
var opacity = 0;
elem.style.display = "block";
var fadeInTimer = setInterval(function(){
if(opacity >= 1){
clearInterval(fadeInTimer);
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
opacity += 0.1;
}, 50);
}
// 调用淡出和淡入函数
var fadeOutBtn = document.getElementById('fadeOutBtn');
var fadeInBtn = document.getElementById('fadeInBtn');
var element = document.getElementById('element');
fadeOutBtn.onclick = function(){
fadeOut(element);
}
fadeInBtn.onclick = function(){
fadeIn(element);
}

以上代码中，fadeOut函数用于淡出元素的效果，fadeIn函数用于淡入元素的效果，其中透明度的变化通过设置元素的opacity和filter属性来实现，opacity属性用于设置透明度，filter属性是兼容IE的透明度设置方法。在这里，我们通过一个定时器来模拟动画效果，每50毫秒改变元素的透明度，直到达到目标值。

总的来说，使用CSS3和JavaScript都可以实现网页淡出淡入效果，无论哪种方法，对于提升用户体验和美化页面都是有很大帮助的。应根据自己的需求选择适合的方法。