使用javascript没有jquery淡化效果？

Question

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

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

我想要最简单的一个......它逐渐消失。

Answer 1

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

1. 使用CSS Opacity属性
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;} } 

有关演示和详细示例，请参阅如何使用JavaScript淡出任何内容 。

干杯 - 张力

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的结构，然后尝试自己动手。

Answer 4

您可以使用十六进制或普通十进制来定义颜色。 使用十六进制系统的示例

BODY {background-color:#FF00FF;}

以及使用十进制系统的示例

BODY {background-color:rgb(51,0,102)}

定义rgb（255,255,255）表示白色，代码rgb（0,0,0）表示黑色。

那你如何才能做出褪色效果呢？ 嗯，最简单的方法是使用十进制代码的方式：

<script type="text/javascript">
 var red = 255;
 var green = 255;
 var blue = 255;
 var interVal = window.setInterval("fadeEffect()", 1000);
 function fadeEffect() {
  if (red > 0 && green > 0 && blue > 0) red--;
  if (red == 0 && green > 0 && blue > 0) green--;
  if (red == 0 && green == 0 && blue > 0) blue--;
  if (red == 0 && green == 0 && blue == 0) window.clearInterval(interVal);

  //Creates the new code of color
  colorAttr = "rgb("+red+","+green+","+blue+")";
  //However or whereever you make the new color public
  ...

  //Reset the first two colors
  if (red == 0) red == 255;
  if (green == 0) green = 255;
 }
</script>

希望它能回答您的问题或帮助您提出自己的想法。 如果要使用十六进制数字，则必须在创建新参数之前转换为hexa代码。

Answer 5

为什么不使用CSS3过渡？

...

opacity: 100;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
transition: opacity .5s ease-out;