求解，为何第一次不加载动画？？？-CSDN论坛

⋅刚学Vue-router,怎么我运行这个地址可以，自己复制过来，运行不了？求解 ⋅grunt 使用uglify 不混淆某个变量名 ⋅求解，为何第一次不加载动画？？？ 更多帖子 关注空间博客 我说我行就是行 本版专家分：199 结帖率 97.73%



<!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动画了，只要是点击一次，都不执行动画，求大神指点

0 2015-08-31 15:06:05

回复数 2 只看楼主引用举报楼主

⋅用网站论坛的移动版发的图片都只有缩略图没有原图

⋅为什么我在问答区的回答总是莫名的消失？

⋅新论坛的编辑器怎么只能输入一千个字符，应该是一万个才对

更多帖子

关注空间博客

天际的海浪

本版专家分：142469

GitHub 绑定GitHub第三方账户获取

进士 2018年总版新获得的技术专家分排名前十
2017年总版技术专家分年内排行榜第七

银牌 2019年1月总版技术专家分月排行榜第二

铜牌 2018年10月总版技术专家分月排行榜第三
2018年9月总版技术专家分月排行榜第三
2018年8月总版技术专家分月排行榜第三: 你没有设置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;
        }

0 2015-08-31 15:47:28

只看TA 引用举报 #1    得分 50

⋅刚学Vue-router,怎么我运行这个地址可以，自己复制过来，运行不了？求解 ⋅grunt 使用uglify 不混淆某个变量名 ⋅求解，为何第一次不加载动画？？？ 更多帖子 关注空间博客 我说我行就是行 本版专家分：199: 引用 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;
        }

奥，是哦，，忘了设置了。。。。。多谢

0 2015-08-31 16:22:43

只看TA 引用举报 #2    得分 0

求解，为何第一次不加载动画？？？ [问题点数：50分，结帖人dingzongyinnihao]