4.09学习笔记 原生js 实现淡入淡出效果

原生js 实现淡入淡出

淡出

/*
* 函数picOut 实现淡出功能
* 参数 ele 节点
*     spe 时间  默认 20ms
*     opac 透明度 默认值0
* 返回值:无
*
* */
function picOut(ele, spe, opac) {
	//透明度从100开始减
	var op = 100;
	// 改变的速度 默认值为20ms
	spe = spe || 20;
	// opac 最终元素的透明度值 默认为0
	opac = opac || 0;
	// 给元素添加样式
	ele.style.opacity = opac / 100;
	function changeOpacity() {
	// 给元素添加样式
		ele.style.opacity = op / 100;
		// 每次减少的值 可以根据需要调试
			op -= 5;
			if (op >= opac) {  // 判断值
				setTimeout(changeOpacity, spe);// 每隔spe ms调用一次函数
			} else if (op < 0) {  // 当小于0 的时候 元素隐藏
				ele.style.display = 'none'
			}
		}
	changeOpacity()
}

淡入

/*
* 函数picIn 实现淡入功能
* 参数 ele 节点
*     spe 时间  默认 20ms
*     opac 透明度 默认值0
* 返回值:无
*
* */
function picIn(ele, spe, opac) {
	//透明度从0开始加
	var op = 0;
	// 改变的速度 默认值为20ms
	spe = spe || 20;
	// opac 最终元素的透明度值 默认为 100
	opac = opac || 100;
	// 给元素添加样式
	ele.style.display = 'block';//让元素显示
	ele.style.opacity = opac / 100;
	function changeOpacity() {
	// 给元素添加样式
		ele.style.opacity = op/ 100;
		// 每次增加的值 可以根据需要调试
		op += 5;
		if (op <= opac) {  // 判断值
			setTimeout(changeOpacity, spe)// 每隔spe ms调用一次函数
		}
	}
	changeOpacity()
}