Question

好的，我会尝试让这个问题更容易理解......我目前正在我的网站上使用JQuery动画。动画效果很好;但是，当刷新页面时，包含动画的div会在将它们定位在正确的位置之前跳转。有时div甚至会加载到不同的垂直位置（然后它会保持这种状态，直到光标悬停在图像/ div上。带有问题的div是row1和row2 div。这个问题似乎主要发生在Chrome中。我我正在寻找一种方法让跳跃停止并让div在100％的时间内在正确的位置加载。

在我的网站的此页面上发生此问题：http://derektice.com/pages/fourthyear.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <head>
        <title>PORTFOLIO || Derek Tice</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <link href="../stylesheets/global.css" rel="stylesheet" type="text/css">
        <link href="../stylesheets/fourthyear.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="../stylesheets/fourthyear.js"></script>
    <script type="text/javascript" language="javascript">
      window.onload = function()
      {
          init();
      };
</script>
    </head>
        <div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
            <img src="../images/nav_bar/home-hover.png" />
            <img src="../images/nav_bar/about-hover.png" />
            <img src="../images/nav_bar/contact-hover.png" />
            <img src="../images/nav_bar/downloads-hover.png" />
            <img src="../images/nav_bar/fourthyear-hover.png" />
            <img src="../images/nav_bar/thirdyear-hover.png" />
            <img src="../images/nav_bar/secondyear-hover.png" />
            <img src="../images/nav_bar/extra-hover.png" />
        </div>
    <body>
        <div id="container">
            <div id="titleblock">
                <a href="../index.html"><img src="../images/title.png"></a>
                <div id="navigation">
                    <a href="../index.html" class="home"></a>
                    <a href="about.html" class="about"></a>     
                    <a href="contact.html" class="contact"></a>
                    <a href="downloads.html" class="downloads"></a>
                        <p>
                    <a href="fourthyear.html"><img src="../images/nav_bar/fourthyear-hover.png"></a>
                    <a href="thirdyear.html" class="third"></a>
                    <a href="secondyear.html" class="second"></a>
                    <a href="extra.html" class="extra"></a>     
                </div>
                <div id="content">
                    <div id="row1">                         
                        <div class="img-wrap">                          
                            <div class="scraperfilter"></div>
                            <a href="skyscraper.html"><div class="overlay"></div></a>                       
                            <a href="skyscraper.html"><img src="../images/skyscraper.png"/></a>
                            <div id="text1"></div>
                        </div>                  
                    </div>
                    <div id="row2">                     
                        <div class="img-wrap">  
                            <div class="busbarnfilter"></div>
                            <div class="overlay"></div>                         
                            <a href="busbarn.html"><img src="../images/busbarn.png"/></a>
                            <div id="text2"></div>
                        </div>                  
                    </div>
                </div>
            </div>
            <div id="copyright">
                Copyright &#169 2013  ||  All rights reserved
            </div>
        </div>

    </body>

</html>

对应的css

body{
    width:1012px;
    margin-right:auto;
    margin-left:auto;
    text-align:left;
    font-family:arial;
    font-size:11px;
    color:#c9c9c9;
    margin-top:0px;
}

a img{
    border:none;
}

#container{
    width:1012px;
    height:423px;
    background-color:#ffffff;
    top:15%;
    position:absolute;
}

#titleblock{
    width:200px;
    height:403px;
    background-color:#4a4a4a;
    opacity:.95;
}

#content{
    width:809px;
    height:403px;
    margin-left:203px;
    margin-top:-37px;
    display:inline-block;
    background-color:;
}

#navigation{
    width:195px;
    height:173px;
    position:absolute;
    bottom:15px;
    padding-left:5px;
}

#copyright{
    width:1002px;
    height:20px;
    margin-top:2px;
    padding-left:7px;
    text-align:left;
}


 #row1{
    width:200px;
    height:403px;
    background-color:#ffffff;
    display:inline-block;
    margin-top:0px;
    position:absolute;
 }

 #text1{
    width:200px;
    height:203px;
    background-image:url('../images/skyscraper-text.png');
    margin-top:0px;
    position:relative;
    cursor:default; 
}

#row2{
    width:200px;
    height:403px;
    background-color:#ffffff;
    display:inline-block;
    z-index:20;
    position:absolute;
    margin-left:203px;
}

#text2{
    width:200px;
    height:203px;
    background-image:url('../images/busbarn-text.png');
    margin-top:0px;
    position:relative;
    z-index:30;
    cursor:default;
}

JQuery的

$(function () {

  $('.img-wrap')
  .mouseenter(function () {
    $(this).find('.overlay').stop().animate({top:"203px"}, 200);
  })
  .mouseleave(function () {
    $(this).find('.overlay').stop().animate({top: 0}, 300);
  });

  $('.img-wrap2')
  .mouseenter(function () {
    $(this).find('.overlay2').stop().animate({top:"203px"}, 200);
  })
  .mouseleave(function () {
    $(this).find('.overlay2').stop().animate({top: 0}, 300);
  });


});

Answer 1

这通常是动画项目边距的结果。你可以做的是给外部div一个填充等于内部项目的边距，然后删除内部项目的边距。

当页面加载时，Jquery div跳转

1 个答案: