javascript - 使用 jQuery 在 HTML 页面之间转换？

Question

我正在使用这段代码在我的 HTML 页面之间进行转换，它工作得很好:

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

但是有一个小问题我无法解决，那就是在淡入和淡出过渡之间显示空白的白色背景。

基本上，当页面淡出并且代码尝试加载下一页时，会有轻微的延迟(几乎 1 秒)，并且在这 1 秒的间隙中显示空白屏幕。我知道我必须使用一些 CSS 并将其添加到我的 HTML CSS 代码中:

html{
    font-size: 100%;
    background-color:#000;

}

但是当我这样做时，由于某些奇怪的原因，加载页面上显示了一条黑线!

有没有办法消除 1 秒延迟或消除页面上的黑线，因为我真的不知道是什么导致了这个问题？

这是我的整个 CSS 代码:

            <style type="text/css" media="screen">
        html{
    font-size: 100%;
    background-color:#000;

}

            #maximage {
/*              position:fixed !important;*/
            }

            #container{
                overflow:hidden;

            }
            #footer{
                color:#FFF;
                text-align:left;
            }

            /*Set my logo in bottom left*/
            #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;

            }

            #txt1 {
                top:55%;
                height:auto;
                left:5%;
                position:absolute;
                width:55%;
                z-index:1000;
                color:#FFF;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;

            }
                #txt2 {
                top:59%;
                height:auto;
                left:5%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;

            }

            #txt3 {
                top:63%;
                height:auto;
                left:5%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;

            }

                        #txt4{
                top:22%;
                height:auto;
                left:3%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;
                margin-top:4%;
                float:left;
            }
                                    #txt5{
                height:auto;
                width:100%;
                z-index:1000;
                color:#fff;
                font-size:4%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;
                text-align:center;

            }
            #logo img {
                width:69%;
            }

body {
    background-color:#000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font: 16px/1.8 sans-serif;
    font-family:Verdana, Geneva, sans-serif; 
}

#preloader{
   position:absolute;
   top: 45%;
   left: 75%;
   width:278px;
   height: 105px;
   margin-top: -45px;
   margin-left: -210px;
   z-index:1000;
}

#wait{
   position:absolute;
   top: 37%;
   left: 45%;
   width:300px;
   height: 113px;
   margin-top: -45px;
   margin-left: -120px;
   z-index:1000;
}

        h1 {
            text-align: left;
            color:#fff;
            font: 16px/1 "Verdana, Geneva, sans-serif";
            display: inline-block;
            width: 100%;
            font-family:Verdana, Geneva, sans-serif;


        }




#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;


}

    #navigation{
        margin-left:2%; 
        margin-top:2%;
  }

  #home{
      width:10%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;

  }

  #products{
     width:10%; 
     margin-bottom:0.5%; 
     text-align:center; 

  }




        a:link { text-decoration:none;}      /* unvisited link */
a:visited { text-decoration:none;}  /* visited link */
a:hover {
text-decoration:none;
}  /* mouse over link */
a:active { text-decoration:none;}  /* selected link */

#div101:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
    opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

   padding: 20px;
   border-radius: 15px;
/* HOVER ON */
   -webkit-transition: border-radius 2s;
     transition:all 2s ease-in-out;
  perspective: 800px;

}

#div102:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
        opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

}


/* Landscape */
@media screen and (orientation:landscape) {
            #logo{
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;

        }

        #preloader{
   position:absolute;
   top: 45%;
   left: 55%;
   width:278px;
   height: 105px;
   margin-top: -45px;
   margin-left: -210px;
   z-index:1000;
}


}

@media screen and (max-width: 600px) , screen and (max-height: 700px) {
  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }
}
@media screen and (max-width: 4000px) , screen and (max-height: 2000px) {


  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }
}

@media only screen and (min-width : 321px) {


  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }

}

@media only screen and (max-width : 321px) {

      #footer {
      font-size:10px;
        text-align: left; 
        margin-left:10%; 
        margin-bottom:5%; 
        font-family:Verdana, Geneva, sans-serif; 
        width:42%;
  }

    #home{  

      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #products{  
      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      font-weight:bold;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #vodka{ 
background-color:#C0C0C0;
      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #contact{   

      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}



  #div101:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
    opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

   padding: 5px;
   border-radius: 5px;
/* HOVER ON */
   -webkit-transition: border-radius 1s;
     transition:all 1s ease-in-out;
  perspective: 800px;

}
}

@media only screen and (min-width : 321px) {

  #footer {
      font-size:13px;
        text-align:left; 
        margin-left:5%; 
        margin-bottom:10%;  
        font-family:Verdana, Geneva, sans-serif; 
        width:30%;
  }
    #home{

      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

      #products{

      width:145px;
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

        #vodka{
background-color:#C0C0C0;
      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

        #contact{

      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

  .rotate{
      cursor:pointer;

    }  

.rotate:hover  
{
    background-color:#da2128;
} 



}

@keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}

@-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}



        </style>

Answer 1

我怀疑您得到一条黑线的原因是因为您的 html 标记在页面转换之间不包含任何内容，所以您看到的实际上是一个非常窄的页面的深色背景。尝试添加 height: 100%; min-height: 100% 到您的 html 标记以强制页面为全高。