1

我想用javascript淡出我页面上的一些元素，但没有jquery。我应该怎么做这个onclick？

4

5 回答 5

5

在我们在您的问题评论中进行了小型讨论之后，您提到您主要针对移动设备。因此， CSS 过渡可能是您的最佳选择，因为它受到所有版本的 iOS 和 Android 的支持，并且不会执行任何昂贵的 JavaScript 循环。

这是一个有效的最小实现的小提琴。

HTML：

<a href="#" id="doFade">fade</a>
<div id="toFade">...</div>

CSS：

#toFade {
    -webkit-transition: opacity 2s;
    opacity: 1;
}

#toFade.faded {
    opacity: 0;
}

Javascript：

document.getElementById('doFade').addEventListener('click', function() {
    document.getElementById('toFade').className += 'faded';
});
于 2013-08-02T16:59:23.870 回答
3 
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

取自http://vanilla-js.com/

于 2013-08-02T13:56:35.067 回答
1

我猜你会做你自己的fadeOut函数？

function fade(element, speed) {
    var op = 1,
        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;
        }, speed);
}

小提琴

于 2013-08-02T13:56:15.977 回答
1

如果您只针对支持 CSS3 淡入淡出选项的浏览器，请选择 CSS3，但如果不是，您将需要类似以下内容：

function addEvent(obj,event,func)
{
    if(typeof func !== 'function')
    {
        return false;
    }
    if(typeof obj.addEventListener == 'function' || typeof obj.addEventListener == 'object')
    {
        return obj.addEventListener(event.replace(/^on/,''), func, false);
    }
    else if(typeof obj.attachEvent == 'function' || typeof obj.attachEvent == 'object')
    {
        return obj.attachEvent(event,func);
    }
}
addEvent(elem,'onclick',function(e) {
    var target = e.srcElement || e.target;
    target.style.opacity = 1;
    var fadeOutInt = setInterval(function() {
        target.style.opacity -= 0.1;
        if(target.style.opacity <= 0) clearInterval(fadeOutInt);
    },50);
});

JSFiddle

于 2013-08-02T13:55:45.630 回答
0

CSS

.fade{

opacity: 0;

}

JavaScript

var myEle=document.getElementById("myID");
myEle.className += " fade"; //to fadeIn
myEle.className.replace( /(?:^|\s)fade(?!\S)/ , '' ) //to fadeOut
于 2013-08-02T14:07:51.740 回答