我正在尝试在屏幕的左侧写一个菜单栏,该菜单栏已经设置为具有id模糊的div。我设置了另一个具有id menuImage的图像,它实际上是一个齿轮图标,应该会打开菜单栏,但是它根本没有响应,我也不知道为什么。请帮助我,我对此感到困惑。这是代码:
var state = false;
var opacity = 0.0;
var menuImage = document.getElementById("menuImage");
var blur = document.getElementById("blur");
var blurAppearence = function(){
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
}
if(state == false){
var disappearence = function(){
if(opacity <= 0.4){
blur.style.opacity = opacity;
} else {
clearInterval(timer)
}
opacity += 0.1;
}
var timer = window.setInterval(appearence, 50);
} else {
if(state == true){
var appearence = function(){
if(opacity >= 0.0){
blur.style.opacity = opacity;
} else {
clearInterval(timer2);
}
opacity -= 0.1;
}
var timer2 = window.setInterval(appearence, 50);
}
}
menuImage.addEventListener("click", blurAppearence);
最佳答案
您似乎太早关闭了blurAppearance功能块。
右上方的右括号
if(state == false){
实际上应该在行前
menuImage.addEventListener("click", blurAppearence);
您的第一个window.setInterval也应该调用消失函数。
见https://jsfiddle.net/orndorffgrant/cfrc5b55/
您也可以更换
if(state == false){
state = true;
} else {
if(state == true){
state = false;
}
}
阻止:
state = !state;