想用原生JS 写个渐渐显示 一秒后渐渐隐藏 但问题百出
想用原生JS 写个渐渐显示 一秒后渐渐隐藏的特效 但问题百出 而且点第二次后会，，，， 可以console.log看
不会JS 所以请教JS大神 帮忙看看 到底哪里出了问题
测试 http://mlloo.cn/test.html
全选复制放进笔记<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS弹出DIV层</title>
<script type="text/javascript">
var i = 0;
function emotion() {
var oMenu = document.getElementById("menu");
//渐现
fnLarge();
//一秒后渐隐
setTimeout("fnSmall()", 1000);
}
//渐现
function fnLarge() {
var oMenu = document.getElementById("menu");
oMenu.style.display = "block";
if(i < 1){
i += 0.1;
//console.log();
oMenu.style.opacity = i;
setTimeout("fnLarge()", 100);
}
}
//渐隐
function fnSmall() {
var oMenu = document.getElementById("menu");
var i=oMenu.style.opacity;
console.log(i);
if (i > 0.1) {
i -= 0.1;
oMenu.style.opacity = i;
setTimeout("fnSmall()", 100);
} else {
oMenu.style.opacity=0;
oMenu.style.display = "none";
}
}
</script>
<style type="text/css">
body {
text-align: center;
}
#menu {
width: 50px;
height: 50px;
border: 1px solid #666;
background: #fff;
margin: 5px auto;
overflow: hidden;
display: none;
padding: 5px 10px;
}
</style>
</head>
<body>
<p onclick="emotion();">点击这行文字试试!</p>
<div id="menu"></div>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
代码存在很多毛病
1.状态维护错误，i和opacity应该同时变化，但代码中有的地方i和opactiy没有同时设置，导致两者数据不一致
2.存在多个定时器，未对定时器进行同步，导致竞争条件，导致结束状态不确定。
最简单的修改方案是每次点击时重置应用状态function reset(){ i = 0; var oMenu = document.getElementById("menu"); oMenu.style.opacity = 0 } function emotion() { reset() var oMenu = document.getElementById("menu"); //渐现 fnLarge(); //一秒后渐隐 setTimeout("fnSmall()", 1000); }2019-07-17 19:02:15赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
