0

在 vanilla-js.com 上，他们展示了一个淡出的例子。

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

我试过这个例子，但它没有用（它没有完全淡出：http: //jsfiddle.net/qvKW7/2/

我也不太明白这到底是做(s.opacity-=.1)<0 什么的：.. < 符号是做什么的？

我真的很喜欢这个代码片段。有人知道更多用 javascript 完成的 jquery 资源，而不是未缩小的 jquery ...？

谢谢

4

5 回答 5

6

解释函数：

(//this and the bottom closure executes the function inside.
 function fade(){//the function is named fade
  (s.opacity-=.1)//sets the opacity to current opacity-0.1, 
   <0?  // if the opacity - 0.1 is smaller than 0 ('<' = smaller then)
  s.display="none" // set display to none
   : // else
  setTimeout(fade,40) // set a timer of 40 ms and execute the function fade again
 }
)();

这是一种很好的 javascript 方式来玩弄一种风格，但是：

1.它是用javascript认真编写的

使用 css3，您无需使用 javascript 即可获得此类动画，其中很酷的部分是浏览器（带有一些技巧）使用硬件 gpu 加速，因此动画非常流畅。如果您在不支持 css3 的非常旧的浏览器中需要这种类型的动画，那么是的，您需要这个，但还需要一些 polyfill 和使用 ie 过滤器来设置不透明度。

2.它将显示设置为无

如果您打算重用该元素，则将元素设置为 display:none 不是一个好方法。因为如果你想再次显示它必须重新绘制它。

3.它使用一个setTimeout

setTimeout 总是不好的选择。

现在回答：

我不知道你到底想达到什么目标，但是

看看这个例子（这适用于 chrome 和 safari，android 和 ios），但可以更改为适用于大多数浏览器。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style>
div{
 background-color:#fc0;
 -webkit-transition:opacity 1500ms ease;
 opacity:1;
}
div.hide{
 opacity:0;
}
</style>
<script>
var changeclass=function(){
 this.classList.add('hide');
}
window.onload=function(){
 var firstDiv=document.getElementsByTagName('div')[0];
 firstDiv.addEventListener('mouseover',changeclass,false);
}
</script>
</head>
<body>
<div>Hello</div>
</body>
</html>

我为我的元素创建了一个 CSS 类。div

在这个 div 中，我将 css3 属性转换设置为以缓动和 1500 毫秒为不透明度设置动画

和一个额外的课程来隐藏它div.hide

这仅包含设置为 0 的不透明度。

现在在我的示例中，我在鼠标悬停时隐藏元素。

因此，当我的 div 元素已加载（window.onload）时，我添加了一个事件处理程序（mouseover）

更改我的 div 元素的类，我称之为changeclass.

于 2013-07-15T13:58:04.253 回答
4

你测试的是什么浏览器？它在 Firefox 21 中对我有用，但其中<包含三元语句的一部分。您发布的代码与以下内容相同：

var s = document.getElementById('thing').style; // s holds the style of 'thing'
s.opacity = 1; // sets the opacity to be fully opaque
(function fade() { // function will automatically execute itself
    if ((s.opacity-=.1) < 0) // decrements the opacity by .1 AND checks if the opacity is less than 0
        s.display="none"; // if the opacity has dropped below 0, hide the element altogether
    else
        setTimeout(fade,40);  // otherwise, run this function again in 40ms
})();

另外，也许试试(s.opacity-=.1) < .1

于 2013-07-15T13:52:17.310 回答
1

您可以尝试减少变量并将不透明度设置为该值：

var s = document.getElementById('thing').style;
var o = 1;
(function fade(){
    s.opacity = o-=0.1;
    o < 0 ? s.display="none" : setTimeout(fade,40);
})();
于 2013-07-15T13:45:44.537 回答
1

(s.opacity-=.1)<0.. <符号有什么作用？

这是常见的小于比较。作者想检查不透明度何时达到零。然而，浮点数学是不精确的，所以==0不会这样做。

于 2013-07-15T13:46:02.790 回答
0

这可能已经晚了，但我没有在这里找到原始问题的答案，而且似乎没有人在其他任何地方解决过这个问题。

淡出时，在条件语句中使用 0.1 作为最小值更安全，如下所示：

(s.opacity-=.1) < .1

因为

(s.opacity-=.1)

实际上应该在动画结束时计算为零而不是负值（这是工作所必需的：

(s.opacity-=.1) < 0 // s.opacity cannot be < 0...

您还可以使用：

(s.opacity-=.1) <= 0

但是我更喜欢：

(s.opacity-=.1) < .1

我也喜欢更换

s.display="none"

和

s.opacity=0

最终代码：

// fade out...
// This way you do not end up with an incomplete fade...

var s = document.getElementById('thing').style;
s.opacity = 1;

(function fade(){
  (s.opacity-=.1)<0.1 ? s.opacity=0 : setTimeout(fade,40) })();

淡入时，使用 0.9 作为最大不透明度值，如下所示：

(s.opacity+=.1) > .9

因为

(s.opacity+=.1)

不能评估为大于 1 的值。和以前一样，您也可以这样做：

(s.opacity+=.1) >= 1 // but I prefer > .9 ...

最后在动画结束时将 s.opacity 设置为 1。

// fade in...

var s = document.getElementById('thing').style;
s.opacity = 0;

(function fade(){ (s.opacity+=.1) > 0.9 ? s.opacity=1 : setTimeout(fade,40) })();
于 2015-04-04T08:29:10.760 回答