想用原生JS 写个渐渐显示 一秒后渐渐隐藏 但问题百出-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

想用原生JS 写个渐渐显示 一秒后渐渐隐藏 但问题百出

2016-03-13 11:21:33 2647 1

想用原生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)
  • a123456678
    2019-07-17 19:02:15

    代码存在很多毛病
    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);
            }
    0 0
相关问答

1

回答

js里的值怎么实现既可以插入html又能作为隐藏值传递??报错

2020-06-22 17:30:31 171浏览量 回答数 1

1

回答

js怎么隐藏图片

2018-05-10 20:00:35 1974浏览量 回答数 1

1

回答

js中怎么将按钮隐藏

2018-05-10 20:00:21 3213浏览量 回答数 1

1

回答

js中div怎么隐藏

2018-05-10 20:00:15 1441浏览量 回答数 1

1

回答

js怎么设置tr隐藏显示

2018-05-10 20:00:13 1652浏览量 回答数 1

3

回答

js怎么讲div隐藏

2018-05-10 20:00:10 1361浏览量 回答数 3

1

回答

js怎么设置按钮隐藏

2018-05-10 19:59:58 1144浏览量 回答数 1

1

回答

用js怎么隐藏按钮

2018-05-10 19:59:44 1145浏览量 回答数 1

1

回答

js怎么把div隐藏

2018-05-10 19:59:36 1141浏览量 回答数 1

1

回答

js怎么让按钮隐藏显示

2018-05-10 19:59:22 2030浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
Python第五讲——关于爬虫如何做js逆向的思路
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载