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

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

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

2016-03-13 11:21:33 2597 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

回答

怎么用原生的JavaScript模拟实现一起拖动桌面几个文件?求思路

2016-03-19 10:49:05 1685浏览量 回答数 1

1

回答

关于JS对象的一个问题?报错

2020-06-20 19:26:11 319浏览量 回答数 1

1

回答

js怎样定义一个字符串类型的json对象?报错

2020-06-15 19:27:18 367浏览量 回答数 1

1

回答

js怎么将对象转为字符串

2018-05-10 20:00:11 1782浏览量 回答数 1

2

回答

js数组怎么添加对象

2018-05-10 19:59:53 4212浏览量 回答数 2

1

回答

js怎么判断是否为对象

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

1

回答

JS怎样快速查询DOM对象属性?

2016-06-20 16:02:05 1612浏览量 回答数 1

1

回答

JavaScript 怎么删除一个对象的样式中的某个属性?

2016-06-12 15:40:51 2462浏览量 回答数 1

1

回答

前端面试题之 js哪些变量不可当作对象使用?

2016-03-11 16:03:55 1569浏览量 回答数 1

1

回答

PHP爬虫在js对象里该如何获取

2016-03-10 10:53:41 2222浏览量 回答数 1
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载