使用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()函数递归调用延迟淡出函数，增加/减少不透明度值，达到淡出效果。 函数fadeOut(id，val){ if(isNaN( val )){ val= 9;} fadeOut //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'；if(val>0-){val-；setTimeout(‘fadeOut(’+id+‘，’+val+‘)，90)；}}函数fadeIn( ID，val){ // ID，要淡出的元素值为0如果(isNaN( val )){val= 0;} val<9//用于IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'；if(val<9){ val++；setTimeout(‘fadeIn(’+id+‘，'+val+')',90)；}isNaN{val；}

干杯-Clain

Answer 2

试试这个：

function fade(what, duration) {
  what.opct = 100;
  what.ih = window.setInterval(function() {
    what.opct--;
    if(what.opct) {
      what.MozOpacity = what.opct / 100;
      what.KhtmlOpacity = what.opct / 100;
      what.filter = "alpha(opacity=" + what.opct + ")";
      what.opacity = what.opct / 100;
    }else{
      window.clearInterval(what.ih);
      what.style.display = 'none';
    }
  }, 10 * duration);
}

用它就像：

fade(htmlobject, 2); // delay is in second

Answer 3

创建动画是一项相当微妙的任务。在处理CSS属性时，您必须考虑浏览器之间的差异。然后，您必须确保您知道如何使用定时器，因为它们在Javascript中通常不太准确。简而言之，编写一个简单的褪色效果是容易的，但要使其与jQuery相媲美，还需要相当多的工作。

您可以阅读这 (嗯，您必须等待它完成)才能更好地了解jQuery是如何构造的，然后尝试使用您自己的。