Question

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

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

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

Answer 1

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

使用CSS Opacity属性
在淡出过程中，我们将不透明度值从0.9减少到0
同样，淡入过程会使0.0增加到0.9
对于IE 10至90

使用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;}
}

您可以参考How To Cross Fade Anything With JavaScript了解演示和详细示例。

干杯 -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相当的工作需要花费大量的工作。

你可以阅读this（好吧，你必须等待它完成）才能更好地了解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;

使用javascript没有jquery淡化效果？

5 个答案: