Question

我正在处理的网站有4个主要的div。加载页面时会显示两个中间的（#left和#right），当单击#right时，它会滑过以显示#portfolio。单击#left时，它会滑过以显示#about。过渡是从#right到#portfolio的过渡，但从#left到#about甚至更奇怪。可能是什么问题？

PS我使用外部库作为背景，因此请使用以下链接查看整个网站。

anjas.atwebpages.com

    <!DOCTYPE html>
    <html lang="en" class="no-js demo5">
        <head>
            <title>Anja's Website</title>
        <script type="text/javascript" src="./lib/jquery.js"></script>
            <link rel="stylesheet" type="text/css" href="./default.css" />
        <script type="text/javascript" src="./lib/interactive-background/js/jquery.interactive_bg.js"></script>
            <script type="text/javascript" src="./index.js"></script>
            <!-- Edit Below -->
            <link rel="stylesheet" type="text/css" href="./lib/interactive-background/css/style.css" />
        </head>
        <body>
            <div class="container bg" data-ibg-bg="keyboard.jpg">
                <div class="header">
                    <div id="about">
                    </div>
            <div id="left" onmouseenter="hoverLeftOn();" onmouseleave="hoverLeftOff();" onclick="leftClick();"><h1>ABOUT</h1></div>
                    <div id="right" onmouseenter="hoverRightOn();" onmouseleave="hoverRightOff();" onclick="rightClick();"><h1>PORTFOLIO</h1></div>
            <div id="portfolio">
                        <ul id="projects">
                            <li class="proj-list" id="dot"><a class="proj-link" href="http://www.dotchhs.com"><img src="./projects/dot.png"></img></a></li>
                        </ul>
                    </div>
                </div>
            <script>
                    $(".bg").interactive_bg({
                        wrapContent: true
                    });
          </script>
            </div>
        </body>
    </html>

CSS

    body, html, li {
        padding: 0;
        margin: 0;
    }

    .header {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Font Icons */
    @font-face {
      font-family: "vertigo";
      src: url('./fonts/vertigo/VertigoFLF.ttf');
    }

    h1, h2, h3 {
        font-family: "vertigo", "arial";
    }

    h1 {
        font-size: 140px;
    }

    #left, #right, #about, #portfolio, img {
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
          -ms-transition: all 0.7s ease-out;
             -o-transition: all 0.7s ease-out;
                transition: all 0.7s ease-out;
    }

    #left {
        position: absolute;
      height: 100%;
        width: 50%;
        float: left;
        background: rgba(0, 0, 0, 0);
    }

    #right {
      height: 100%;
        width: 50%;
        float: right;
        position: absolute;
        left: 50%;
        background: rgba(0, 0, 0, 0);
    }

    #portfolio {
        position: absolute;
        height: 100%;
        width: 50%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .2);
        left: 100%;
    }

    #about {
        position: absolute;
        height: 100%;
        width: 50%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .2);
        right: 100%;
    }

    #projects {
        margin: 0;
        padding: 0;
    }

    .proj-list {
        list-style-type: none;
    }

    .proj-link:link, .proj-link:visited {
        color: rgba(0, 0, 0, 1);
        text-decoration: none;
    }

    img {
        width: 100%;
        height: 10%;
        margin: 0;
        padding: 0;
        opacity: .95;
    }

    img:hover {
        transform: scale(1.1);
    }

    p {
        font-family: "vertigo";
        font-size: 32px;
        margin: 7%;
        background-color: rgba(0, 0, 0, .6);
    }

    /* Responsive */
    @media screen and (max-width: 25em) {

    }

JS

var port = true;
var abt = true;

function hoverLeftOn () {
  $("#left").css("background", "rgba(0, 0, 0, .2)");
}

function hoverRightOn () {
  $("#right").css("background", "rgba(0, 0, 0, .2)");
}

function hoverLeftOff () {
  $("#left").css("background", "rgba(0, 0, 0, 0)");
}

function hoverRightOff () {
  $("#right").css("background", "rgba(0, 0, 0, 0)");
}

function rightClick () {
  var move;
  var portPerc;
  if (port) {
    move = "-100%";
    portPerc = "50%";
    port = false;
  } else {
    move = "0%";
    portPerc = "100%";
    port = true;
  }
  $("#left").css("-webkit-transform", "translate(" + move + ", 0px)");
  $("#left").css("-moz-transform:", "translate(" + move + ", 0px)");
  $("#left").css("-ms-transform", "translate(" + move + ", 0px)");
  $("#left").css("-o-transform", "translate(" + move + ", 0px)");
  $("#left").css("transform", "translate(" + move + ", 0px)");

  $("#right").css("-webkit-transform", "translate(" + move + ", 0px)");
  $("#right").css("-moz-transform:", "translate(" + move + ", 0px)");
  $("#right").css("-ms-transform", "translate(" + move + ", 0px)");
  $("#right").css("-o-transform", "translate(" + move + ", 0px)");
  $("#right").css("transform", "translate(" + move + ", 0px)");

  $("#portfolio").css("left", portPerc);
}

function leftClick () {
  var move;
  var portPerc;
  if (abt) {
    move = "100%";
    portPerc = "50%";
    abt = false;
  } else {
    move = "0%";
    portPerc = "520%";
    abt = true;
  }
  $("#left").css("-webkit-transform", "translate(" + move + ", 0px)");
  $("#left").css("-moz-transform:", "translate(" + move + ", 0px)");
  $("#left").css("-ms-transform", "translate(" + move + ", 0px)");
  $("#left").css("-o-transform", "translate(" + move + ", 0px)");
  $("#left").css("transform", "translate(" + move + ", 0px)");

  $("#right").css("-webkit-transform", "translate(" + move + ", 0px)");
  $("#right").css("-moz-transform:", "translate(" + move + ", 0px)");
  $("#right").css("-ms-transform", "translate(" + move + ", 0px)");
  $("#right").css("-o-transform", "translate(" + move + ", 0px)");
  $("#right").css("transform", "translate(" + move + ", 0px)");

  $("#about").css("right", portPerc);
}

为什么我的div过渡滞后？

0 个答案: