今天现在在IFE上完成一个JS的小任务,大致的意思就是用定时器完成淡入淡出效果,
<div id="fade-obj" style="width:300px;height:300px;background:#000">
</div> <button id="fade-btn" >淡出</button>
需求是
- 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0
- 在动画过程中,按钮的状态变为不可点击
- 在动画结束后,按钮状态恢复,且文字变成“淡入”
- 在 按钮显示 淡入 的状态时,点击按钮,开始一个“淡入”(逐渐出现)的动画,和上面类似按钮不可点,直到透明度完全不透明
- 淡入动画结束后,按钮文字变为“淡出”
在我之前的印象中,input,button类似的标签,在静态的情况下,要是要不可用,直接写disable( disable = "disable" ),或者checked( checked = "checked"),但是没有一个属性名字(像宽度用width,高度用height一样来框定)来指定这个属性,考录到小括号里完整的写法,我用JS直接写上 var btn = document.getElementById("fade-btn"); btn.addEventListener("click", function () { btn.disabled = "disable";})
发现按钮确实实现了不可点击,如法炮制,创建一个input的标签来测试,却发现此方法同样使用于checked。
再反复这个淡入淡出过程中,我尝试了用hover和toggle,因为印象中有类似的效果,无果,查询结果如下:
1.hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数;
2.toggle() 方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
自己没有想出相应的方法,他人有实现,先保存。
<body> <div id="fade-obj" style="width:300px;height:300px;background:#000"></div> <button id="fade-btn">淡出</button> <script> var fadeObj = document.querySelector('#fade-obj'); var fadeBtn = document.querySelector('#fade-btn'); fadeBtn.addEventListener('click', function () { if (this.innerHTML === '淡出') { changeOpacity('minus'); } else { changeOpacity('add'); } }); // setTimeout function changeOpacity(type) { fadeBtn.setAttribute('disabled', 'disabled'); if (type === 'minus') { var opacity = 1; setTimeout(function fn() { if (opacity > 0) { setTimeout(fn, 16); } else { fadeBtn.textContent = '淡入'; fadeBtn.removeAttribute('disabled'); return false; } opacity -= 0.01; fadeObj.style.opacity = opacity; }, 16); } else { var opacity = 0; setTimeout(function fn() { if (opacity < 1) { setTimeout(fn, 16); } else { fadeBtn.textContent = '淡出'; fadeBtn.removeAttribute('disabled'); return false; } opacity += 0.01; fadeObj.style.opacity = opacity; }, 16); } }