gpt4 book ai didi

javascript - 没有框架的简单淡入淡出效果onclick

转载 作者:太空宇宙 更新时间:2023-11-04 14:22:49 25 4
gpt4 key购买 nike

我正在寻找最简单的方法来淡化另一个 div onclick 的 div,然后隐藏它或淡入一个 div。提前致谢。

最佳答案

这是一个很棒的 javascript 淡出效果:

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

这是一个淡入和淡出显示“Hello World!”的 div 的工作示例:

<html>
<script>
function animator(element) {
this.el = element;
this.state = 0;
this.fadeout = function() {
var element = this.el;
var op = 1;
var timer = setInterval(function () {
if (op <= 0.0) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= 0.1;
}, 50);
};
this.fadein = function() {
var element = this.el;
var op = 0.0;
var timer = setInterval(function () {
if (op >= 1.0) {
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += 0.1;
}, 50);
};
}
function initfader() {
show = new animator(document.getElementById("div1"));
}
</script>
<body onload="initfader();">
<div id="div1">
<h2>Hello World!</h2>
</div>
<input type="button" onclick="show.fadein();" value="in" />
<input type="button" onclick="show.fadeout();" value="out" />
</body>
</html>

关于javascript - 没有框架的简单淡入淡出效果onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19778992/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com