不使用jQuery淡入淡出

Question

我正在使用此函數打開和關閉onclick元素。 如何在不使用jQuery的情況下添加一些淡入淡出效果？

function toggle_visibility(){ 
    for(var i = 0,len = arguments.length;i < len;i++){ 
    var e = document.getElementById(arguments[i]).style,d = e.display; 
    e.display = (d == "block") ? "none" : "block"; 
    } 
} 

Answer 1

您可以使用CSS3過渡和不透明度要做到這一點

#block { 
    transition: opacity 1s ease-in-out; 
} 

.out { opacity: 0; } 
.in { opacity: 1; } 

然後用出來或在課堂上隱藏或顯示元素

Answer 2

您可以編寫自己的功能是這樣的：

var toggleFade = function(element, time, callback) { 
    var timeStep = 50; 
    var step = timeStep/time; 
    var toValue = 1; 
    if (element.style.display != 'none') { 
     step = -step; 
     toValue = 0; 
     element.style.opacity = element.style.opacity || 1;   
    } else { 
     element.style.opacity = element.style.opacity || 0; 
     element.style.display = 'block';   
    } 

    var interval = setInterval(function() { 
     var newVal = +element.style.opacity + step; 

     if (newVal < 0 && step < 0) { 
      clearInterval(interval); 
      element.style.opacity = 0; 
      element.style.display = 'none' 
      callback && callback(); 
     } else if (newVal > 1 && step > 0) { 
      clearInterval(interval); 
      element.style.opacity = 1; 
      callback && callback(); 
     } else 
      element.style.opacity = newVal; 
    }, timeStep); 
} 

Demo