如何创建不透明度褪色（）？ （改进jQuery） [英] How to create an opacity fade()? ( improvement over jQuery)

问题描述

我不使用JQuery，但我知道他们有功能这样做。我知道如何在JQuery中做到这一点，但我想要一个纯js解决方案。

I'm not using JQuery but I know they have functions to do this. I know how to do this in JQuery but I want a pure js solution.

如何时间改变CSS不透明度设置？ unix时间戳精确到1000毫秒...所以这可能是一种方式。

How can I time vary the CSS opacity setting? A unix time stamp has precision to 1000 milliseconds...so that might be one way.

使用clearTimeout和setTimeout是另一种方式。

Using clearTimeout and setTimeout would be another way.

这是最好的方法。我尝试查看 JQuery来源，但无法确定他们在做什么 fadeIn 和 fadeOut 。

What is the best way to do this. I tried looking at JQuery source but could not figure out what they were doing exactly for fadeIn and fadeOut.

/ strong>

Related

如何消除未使用的参数？

How to eliminate unused arguments?

推荐答案

这里有一个使用setTimeout的动画函数。您可以在这里查看它的工作： http://jsfiddle.net/jfriend00/GcxdG/ 。 p>

Here's an animation function using setTimeout. You can see it work here: http://jsfiddle.net/jfriend00/GcxdG/.

function toggleOpacity(id) {
    var el = document.getElementById(id);
    if (el.style.opacity == 1) {
        fadeObject(el, 1, 0, 2000)
    } else {
        fadeObject(el, 0, 1, 2000)
    }
}

function fadeObject(el, start, end, duration) {
    var range = end - start;
    var goingUp = end > start;
    var steps = duration / 20;   // arbitrarily picked 20ms for each step
    var increment = range / steps;
    var current = start;
    var more = true;
    function next() {
        current = current + increment;
        if (goingUp) {
            if (current > end) {
                current = end;
                more = false;
            }
        } else {
            if (current < end) {
                current = end;
                more = false;
            }
        }
        el.style.opacity = current;
        if (more) {
            setTimeout(next, 20);
        }
    }
    next();
}

注意：此功能尚未适用于未回应的旧版IE到 opacity 样式，并且需要通过特定于IE的过滤器设置它们的不透明度。

Note: this is not yet adapted for older IE versions which don't respond to the opacity style and need to have their opacity set via an IE-specific filter setting.

这篇关于如何创建不透明度褪色（）？ （改进jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！