我想用javascript在我的页面上淡出一些元素,但没有jquery。我该如何点击这个?
答案 0 :(得分:4)
在您提到的问题评论中进行了一些小讨论后,您提到的主要是针对移动设备。因此,CSS transition可能是您的最佳选择,因为它受到所有iOS和Android版本的支持,并且不会执行任何昂贵的JavaScript循环。
Here's a fiddle of a working minimal implementation
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';
});
答案 1 :(得分:3)
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
答案 2 :(得分: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);
});
答案 3 :(得分: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);
}
答案 4 :(得分:0)
CSS
.fade{
opacity: 0;
}
的JavaScript
var myEle=document.getElementById("myID");
myEle.className += " fade"; //to fadeIn
myEle.className.replace( /(?:^|\s)fade(?!\S)/ , '' ) //to fadeOut