账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    js用setInterval()做缓冲运动,第一个缓冲能实现效果,第二个为什么还没到达设定条件就已经停止计时了?
    34
    0

    js用setInterval()做缓冲运动,第一个缓冲能实现效果,第二个为什么还没到达设定条件就已经停止计时了?

    做一个侧边栏的缓冲效果,从左边进入和离开,但是离开的时候感觉没有在及时,LeftBar.style.left直接跳到-300px.

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    <!DOCTYPE html>
    <html lang="en" style="overflow-x: hidden">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <style>
        html,body{margin: 0;padding: 0;overflow-x: hidden}
        .nav-container{width: 100%;height: 90px;background-color: #0abfbf;position: relative}
        .nav-container #tab-bar{width: 60px;height: 60px;border: 1px #2b2c31 solid;text-align: center;position: absolute;display:flex;left: 10px;margin-top: 10px}
        .nav-container #tab-bar span{width: 80%;height: 4px; background-color: #2b2c31;margin-top: 16px;
            display:block;position: absolute;margin-left: 10%;}
        .nav-container #tab-bar .tab-bar-1{top: 0} .nav-container #tab-bar .tab-bar-2{top: 9px} .nav-container #tab-bar .tab-bar-3{top: 18px}
    
        .left-bar{width: 300px;border: 1px solid #0c6492;display: block;top: 0;left: -300px;right: auto;position: fixed;overflow-y:auto}
        .bar-close{width: 60px;height: 60px;position: relative;right: -220px}
        .bar-close .bar-left, .bar-close .bar-right{position: absolute;width: 80%;margin-left: 10%;height: 3px;background: black}
        .bar-close .bar-left{transform: rotate(45deg);top: 5px}  .bar-close .bar-right{transform: rotate(315deg);top: 5px}
        body{left: 0px;display: block;overflow-y: auto;height: 3000px}
    </style>
    <body>
    <nav class="nav-container">
        <div id="tab-bar">
            <span class="tab-bar-1"></span>
            <span class="tab-bar-2"></span>
            <span class="tab-bar-3"></span>
        </div>
    </nav>
    
    <div class="left-bar">
        <ul>
            <li>首页</li>
            <li>Dating Site</li>
            <li>Dating Tips</li>
            <li>Blogs</li>
            <li>Forum</li>
            <li>Sign Up</li>
        </ul>
        <div class="bar-close">
            <span class="bar-left"></span>
            <span class="bar-right"></span>
        </div>
    </div>
    </body>
    <script>
    
    
        var LeftBar =document.getElementsByClassName('left-bar')[0]
        var BoDy = document.body
    
        var  TabBar = document.getElementById('tab-bar')
        var BarClose = document.getElementsByClassName('bar-close')[0]
    
    
        TabBar.onclick = function () {
    
            var timer = setInterval(function () {
                console.log(LeftBar.offsetLeft)
                if(LeftBar.style.left>=0 +"px"){
                    clearInterval(timer)
                    LeftBar.style.left = 0 + "px"
                }
                else {
                    LeftBar.style.left = (2+LeftBar.offsetLeft)/2 + "px"
                    BoDy.style.marginLeft = (600+LeftBar.offsetLeft)/2 +"px"
                }
    
            },100)
    
        }
    
        BarClose.onclick = function () {
    
            var timer = setInterval(function () {
                //console.log(LeftBar.offsetLeft)
                if(LeftBar.style.left<=-300 + "px"){
                    clearInterval(timer)
                    LeftBar.style.left = -300 + "px"
                }
                else {
                    LeftBar.style.left = (-4+LeftBar.offsetLeft)/2 + "px"
                    BoDy.style.marginLeft =(2+LeftBar.offsetLeft)/2 +"px"
                    console.log(LeftBar.offsetLeft)
                }
    
            },100)
    
        }
    </script>
    </html>

    怎样才能实现侧边栏进入和离开的时候都有缓冲运动呢?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益