day 1. IFE-淡入淡出

今天现在在IFE上完成一个JS的小任务，大致的意思就是用定时器完成淡入淡出效果，

</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);
        }
    }

day 1. IFE-淡入淡出

猜你喜欢