Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
​
    <button id='fadeOut'>淡出</button>
    <button id='fadeIn'>淡入</button><br>
    <img id="image" src="https://openhome.cc/Gossip/images/caterpillar_small.jpg">  
​
<script type="text/javascript">
    function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }
  
    // value 未指定時，用來取得不透明度
    function opacity(elem, value) {
        if(value === undefined) { 
            let opt = style(elem, 'opacity');
            return opt === '' ? 1 : parseFloat(opt);
        } else {
            elem.style.opacity = value;
        }
    }
​
    // speed 是淡入總時間，step 是動畫數
    function fadeIn(elem, speed = 5000, steps = 10) {
        let targetValue = elem.previousOpacity || 1;
        delete elem.previousOpacity;
        
        let timeInterval = speed / steps;
        let valueStep = targetValue / steps;
      
        let opt = 0;
        setTimeout(function next() {
            opt += valueStep;
            if(opt < targetValue) {
                opacity(elem, opt);
                setTimeout(next, timeInterval);
            }
            else {
                opacity(elem, targetValue);
            }
        }, timeInterval);
    }     
​
    function fadeOut(elem, speed = 5000, steps = 10) {
        elem.previousOpacity = opacity(elem);
      
        let timeInterval = speed / steps;
        let valueStep = elem.previousOpacity / steps;
      
        let opt = elem.previousOpacity;
        setTimeout(function next() {
            opt -= valueStep;
            if(opt > 0) {
                opacity(elem, opt);
                setTimeout(next, timeInterval);
            }
            else {
                opacity(elem, 0);
            }
        }, timeInterval);
    }  
  
    let image = document.getElementById('image');
                
    document.getElementById('fadeIn').onclick = function() {
        fadeIn(image, 2000);
    };
                
    document.getElementById('fadeOut').onclick = function() {
        fadeOut(image, 2000);
    };  
</script>
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JustinSDKpro
0viewers