Jquery使用fadein()方法左上角会出现神秘小黑块？

Question

Jquery使用fadein()方法左上角会出现神秘小黑块？

RedDevi1s

13

发布于
2018-04-09

更新于
2018-04-09

新手上路，请多包涵

写了一个简单的带tab切换的web应用，在移动端chrome64使用点击tab切换调用fadein()方法显示相应section的时候屏幕左上角会出现小黑块 PC端有时会出现，有时不会出现

edit:用手机端基本可以复现

图片描述
在线demo
http://js.jirengu.com/qovoz/e...

$tabs = $('footer>div')
$panels = $('section')


$tabs.click(function () {
            var index = $(this).index()
            $panels.hide().eq(index).fadeIn()
            $(this).addClass('active').siblings().removeClass('active')
        })

<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<main>
    <section>Container1</section>
  <section>Container2</section>
  </main>
  <footer>
    <div class="tab">Tab1</div>
    <div class="tab">Tab2</div>
  </footer>
</body>
</html>

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
html,body,main{
  height:100%;
  width:100%;
}

body{
  position:relative;
}

main>section{
  height:calc(100% - 50px);
  display:none;
  overflow:scroll;
}
main>section:first-child{
  display:block;
}

footer{
  display:flex;
  position:absolute;
  bottom:0;
  height:50px;
  width:100%;
}

footer>.tab{
  flex:1;
  border:1px solid;
  text-align:center;
}

footer>.tab.active{
  flex:1;
  border:1px solid;
  text-align:center;
  background-color:green;
}

html jquery

阅读 1.8k

1 个回答

善良的乌贼

手都按累了也没出来额。。。

推荐问题