javascript - 使用javascript没有jquery的淡入淡出效果？

Question

从 javascript 派生的 jQuery 有创建淡入淡出效果的漂亮方法。

但是如何使用我自己的自定义 javascript 代码实现相同的高度？

我想要最简单的..淡出到零。

Answer 1

这里是使用 JavaScript 纯淡入淡出效果的实现。

1. 利用 CSS 不透明度属性

2. 在淡出过程中，我们将不透明度值从 0.9 降低到 0

3. 同样淡入淡出的过程将 0.0 增加到 0.9

4. 对于 IE，它是 10 到 90

5. 使用setTimeout()函数延迟递归调用淡入淡出函数，增加/减少不透明度值实现淡入淡出效果

     function fadeOut(id,val){ if(isNaN(val)){ val = 9;}
     document.getElementById(id).style.opacity='0.'+val;
     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
     if(val>0){
       val--;
       setTimeout('fadeOut("'+id+'",'+val+')',90);
     }else{return;}
   }
   
   function fadeIn(id,val){
   // ID of the element to fade, Fade value[min value is 0]
     if(isNaN(val)){ val = 0;}
     document.getElementById(id).style.opacity='0.'+val;
     //For IE
     document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
     if(val<9){
       val++;
       setTimeout('fadeIn("'+id+'",'+val+')',90);
     }else{return;}
   }
   

干杯 -克莱恩