如何创建不透明度淡化（）？ （对jQuery的改进）

Question

我没有使用JQuery，但我知道他们有这样做的功能。我知道如何在JQuery中执行此操作，但我想要一个纯粹的js解决方案。

我如何改变CSS不透明度设置的时间？ unix时间戳的精度为1000毫秒......所以这可能是单向的。

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

这样做的最佳方法是什么。我尝试查看JQuery source，但无法确定他们对fadeIn和fadeOut的确切行为。

相关

How to eliminate unused arguments in an opacity fade?

Answer 1

这是使用setTimeout的动画功能。你可以在这里看到它：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();
}

注意：这还不适用于不响应opacity样式且需要通过IE特定filter设置设置其不透明度的旧IE版本。

Answer 2

for (var i = 1; i < 100; i += 1) { // change the += 1 for different smoothness
    (function(i) { 
        setTimeout(function() {
            el.style.opacity = (100 - i) * 0.01;
        }, i * 10);
    })(i);
}

Answer 3

/**
 **  SEffects - user can set the opacity fade to up or down and the specefied time
 */

var SEffects = function ( element ) {
    this.element = element;
};
SEffects.prototype.fade = function( direction, max_time ) {
    var element = this.element;
    element.elapsed = 0;
    clearTimeout( element.timeout_id );
    function next() {
        element.elapsed += 10;
        if ( direction === 'up' ) {
                element.style.opacity = element.elapsed / max_time;
            }
            else if ( direction === 'down' ) {
                element.style.opacity = ( max_time - element.elapsed ) / max_time;
            }
            if ( element.elapsed <= max_time ) {
                element.timeout_id = setTimeout( next, 10 );
            }
        }
        next();
    };