在没有jquery的情况下淡出页面上的元素
Fade out elements on page without jquery
我想用javascript淡出页面上的一些元素,但不使用jquery。我该怎么做?
在我们对您的问题的评论中进行了小讨论后,您提到您主要针对移动设备。因此,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';
});
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/
我想你会制作自己的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);
}
FIDDLE
如果您只针对支持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
CSS
.fade{
opacity: 0;
}
JavaScript
var myEle=document.getElementById("myID");
myEle.className += " fade"; //to fadeIn
myEle.className.replace( /(?:^|'s)fade(?!'S)/ , '' ) //to fadeOut
相关文章:
- 在弹出元素中淡入淡出
- 用于append元素的jQuery淡入淡出
- 重用用于淡入淡出元素的代码,这样我就不会'我不必重复我的代码
- 拒绝淡出或进入的元素
- 如何重复淡入和淡出容器元素的跨度
- 我试图用jQuery让每个HTML5元素一次淡出一个
- jQuery淡出元素,替换内容并淡入
- 淡入淡出切换jquery元素
- 淡出推特引导popover上的不同元素
- 淡出和淡入到同一元素处的另一图像
- 使用 Jquery 使一个元素淡出,一个新元素淡入
- 如何在标题中的所有元素中淡入淡出
- Jquery淡入,一起淡出一些元素
- 检查元素是否淡出(Javascript/Jquery)
- 淡出所有“LI”元素
- 悬停时查询淡出元素
- 无法让元素淡出/淡入
- 新旧子元素之间的反应过渡淡入淡出
- 如果单击消息框,防止鼠标离开元素淡出
- 淡出当前元素淡出下一个元素并反转