所以我正在环顾问题，找到了我想要使用的这个方便的代码。
function fade() {
var op = 1; // initial opacity
var thing = document.getElementById('fader');
var timer = setInterval(function ()
{
if (op <= 0.1)
{
clearInterval(timer);
thing.style.display = 'none';
}
thing.style.opacity = op;
thing.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
function unfade() {
var thing2 = document.getElementById('fader');
var op = 0.1; // initial opacity
thing2.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
thing2.style.opacity = op;
thing2.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, 10);
}
这些功能究竟如何解释可以解释一下吗？我主要想玩它，以便从视图中淡入淡出。我可以将代码链接到一个按钮，当点击该按钮时，淡化带有＆＃39;推子＆＃39; id的块引用。从视图，但只要点击一个按钮就可以使用这两个功能吗？
编辑：我玩了一些代码，所以我最终得到了这样的测试代码。
<!doctype HTML>
<html>
<head>
<style>
blockquote{
max-height: auto;
max-width: auto;
position: fixed;
right: 50%;
bottom: 50%;
border-style: ridge;
border-width: 5px;
padding: 25px;
}
</style>
</head>
<body>
<form>
<blockquote id= 'fader'>
<input type = 'button' id = 'fades' value = 'This fades.' onclick = 'fade(); unfade()'/>
</blockquote>
</form>
</body>
<script>
function fade() {
var op = 1; // initial opacity
var thing = document.getElementById('fader');
var timer = setInterval(function ()
{
if (op <= 0.1)
{
clearInterval(timer);
thing.style.display = 'none';
}
thing.style.opacity = op;
thing.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
function unfade() {
var thing2 = document.getElementById('fader');
var op = 0.1; // initial opacity
thing2.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
thing2.style.opacity = op;
thing2.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, 10);
}
</script>
</html>
问题在于它消失了并且没有回来。
答案 0 :(得分：0)
你实际上需要像淡入淡出切换这样的东西，所以，淡入和淡出都应该在一次点击时发生。在这种情况下，您不需要两个函数，您可以设置其他'flag'，检查某些条件，以及设置渐变方向（不透明度的增量或减量）。
E.g。在这种情况下，如果不透明度低于0.01（如果你检查你的op值，你会注意到它没有四舍五入，也许我们不需要舍入值，我们需要完全淡出元素，所以在不久的时刻，不透明度应该是超低），应该改变渐变方向，所以 - 你应该增加不透明度，反之亦然。
你可以这样做：
<blockquote id= 'fader'>
<input type = 'button' id = 'fades' value = 'This fades.' onclick = 'fade_toggle(this.parentNode,true);'/>
</blockquote>
JS：
function fade_toggle(el, check) {
var op = 1; // initial opacity
var timer = setInterval(function() {
el.style.opacity = op;
el.style.filter = 'alpha(opacity=' + op * 100 + ")";
if (op > 0.01 && check == true) {
op -= op * 0.1;
}
if (op < 0.01) {
check = false;
}
if (check == false && op < 1) {
op += op * 0.1;
}
if (op > 0.9) {
el.style.opacity = 1;
check = true;
clearInterval(timer);
}
}, 50);
}