-1
Хорошо, я постараюсь сделать этот вопрос более понятным .... здесь идет. В настоящее время я использую анимацию JQuery на своем веб-сайте. Анимация работает нормально; однако, когда страница обновляется, divs, содержащие анимацию, перемещаются, прежде чем они позиционируют себя в нужном месте. Иногда divs будет даже загружаться в другом вертикальном положении (тогда он остается таким образом, пока курсор не будет вибрировать над изображением/div. Разделители с проблемой - это div1 и row2. Эта проблема, похоже, происходит в основном в Chrome. ищу способ, чтобы получить прыжок, чтобы остановить и получить DIV для загрузки в нужном месте 100% времениJQuery div перескакивает при загрузке страницы
эта проблема возникает на этой странице моего сайта:. 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 © 2013 || All rights reserved
</div>
</div>
</body>
</html>
соответствующие cs s
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);
});
});
Можете ли вы разместить код вместо ссылки? – PinnyM
@ пользователь: MOre на запрос PinnyM: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question –