求解,为何第一次不加载动画???

我说我行就是行 2015-08-31 03:06:05

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title></title>
<meta charset="utf-8" />
<script src="../js/jquery-1.9.1.min.js"></script>
<style type="text/css">
#pagenos {
position: fixed;
top: 0px;
left: 0px;
text-align: center;
font-family: '微软雅黑';
width: 100%;
z-index: 2;
border: 1px solid #e5e5e5;
color: #686767;
}

#content {
-moz-transition-property: left;
-o-transition-property: left;
-webkit-transition-property: left;
transition-property: left;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
overflow: hidden;
position: absolute;
}

.blk {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
overflow: auto;
}

#box {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 45px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#youbiao {
-moz-transition-property: left;
-o-transition-property: left;
transition-property: left;
-webkit-transition-property: left;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
position: fixed;
top: 0;
left: 0;
height: 40px;
background: #e5e5e5;
z-index: 1;
box-sizing: border-box;
width: 50%;
}

.myspan1 {
padding: 10px 0;
display: inline-block;
width: 49%;
text-align: center;
font-size: 14px;
}
</style>
<script>
var tabnum = 2;//当前的标签页
var curP = 0; //当前所属的标签页
var dqwidth = document.documentElement.clientWidth;//屏幕的当前宽度
var dqheight = document.documentElement.clientHeight;//屏幕的当前高度
function show(n) {
curP = n;
$("#content").css("left", -curP * dqwidth + 'px');
$('#youbiao').css({ "left": curP * dqwidth / tabnum });
$("#myspan0").css("color", "#686767");
$("#myspan1").css("color", "#686767");
$("#myspan" + n).css("color", "blue");
}
function Init() {
$("#myspan0").css("color", "blue");
$('#content').width(dqwidth * tabnum);
$('.blk').width(dqwidth);
$('#box').css("height", dqheight + "px");
}

$(function () {
Init();
})
</script>
</head>
<body>
<div id="pagenos">
<span class="myspan1" id="myspan0" onclick="show(0)"> 第一个</span>
<span class="myspan1" id="myspan1" onclick="show(1)"> 第二个</span>
</div>
<div id="youbiao"> </div>
<div id="box">
<div id="content">
<div class="blk" id="a0"> <div id="main_page"> 内容一</div> </div>
<div class="blk" id="a1"> <div id="main_pageme">内容二</div> </div>
</div>
</div>
</body>
</html>



第一次运行页面的时候,点击第二个,下面的内容不显示动画,继续点击就会显示动画,会执行0.3s动画了,只要是点击一次,都不执行动画,求大神指点
...全文
145 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
引用 1 楼 jslang 的回复:
你没有设置left的初始值 #content { left: 0px; -moz-transition-property: left; -o-transition-property: left; -webkit-transition-property: left; transition-property: left; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; overflow: hidden; position: absolute; }
奥,是哦,,忘了设置了。。。。。多谢
天际的海浪 2015-08-31
  • 打赏
  • 举报
回复
你没有设置left的初始值 #content { left: 0px; -moz-transition-property: left; -o-transition-property: left; -webkit-transition-property: left; transition-property: left; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; overflow: hidden; position: absolute; }

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧