39,118
社区成员
发帖
与我相关
我的任务
分享求解，为何第一次不加载动画？？？
<!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动画了，只要是点击一次，都不执行动画，求大神指点
...全文
请发表友善的回复…
发表回复
我说我行就是行 2015-08-31
- 打赏
- 举报
奥，是哦，，忘了设置了。。。。。多谢
天际的海浪 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;
}
