没有Jquery和CSS3，Javascript淡出淡出 [英] Javascript fade in fade out without Jquery and CSS3

问题描述

我真的在挤压我的脑袋，只使用没有JQuery和CSS3的javascript进行简单的淡入和淡出背景图像工作。我知道在Jquery中调用fadeIn（）和fadeOut（）是多么容易。不幸的是，在我的项目中，我正在工作，他们不支持Jquery。我希望从IE6支持动画以获取您的信息。

I am really squeezing my head to make the simple fade in and fade out of the background image work only with javascript without JQuery and CSS3. I know how easy is to call a fadeIn() and fadeOut() in Jquery. Unfortunately in my project I am working, they don't support Jquery. I want to support the animation from IE6 for your info.

点击链接后，div的相应背景将从以前淡入和淡出现有背景。我试图让它基于setinterval工作，但无法做到。

function handleClick(evt){
    var element = document.getElementsByClassName(evt.target.id);
    fade(element);

}
 function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

http://jsfiddle.net/meetravi/2Pd6e/4/

推荐答案

getElementById 为您提供一个元素（或null）， getElementsByClassName 给出一个数组。

getElementById givies you one element (or null), getElementsByClassName gives an array.

function handleClick(evt){
    var element = document.getElementById(evt.target.id);
    fade(element);

}

您似乎的目标是使用ID，所以这应该回答你的需求。我更新了整个内容： ID

You seem to aim for usage of ID's, so this should answer your needs. I updated the whole thing: IDs

但是，您应该意识到这种衰落方法比使用GPU加速转换要昂贵得多。

However, you should realize that this method of fading is much more costly than using GPU accelerated transitions.

更新

JSfiddle webkit opacity fade

这篇关于没有Jquery和CSS3，Javascript淡出淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！