[英]Animation: jQuery VS CSS: jQuery lags, why? - jsFiddle comparison/example
[英]jQuery animation lags
使用.animate()方法时,我的jQuery动画存在滞后问题。 我尝试使用.stop()方法尝试解决该问题,但无济于事。 我有一组图片,这些图片在页面加载时从屏幕开始依次下降。
问题在于,前4张图片停在其应有的位置的正上方,而当第5张图片到达此点时,它们全部归为剩余量。 有任何想法吗? 谢谢
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="row" id="sky">
<div class="col-sm-12 col-xs-12 col-sm-offset-0 col-xs-offset-0" > <img src="stars.png" class="img-responsive" alt="Stars" style="position: absolute;" > </div>
</div>
</div>
<div class="row">
<div id="treeline">
<div id="yard" class="col-sm-8 col-xs-12 col-sm-offset-2 col-xs-offset-0" > <img src="yard2.png" class="img-responsive" alt="Yard" > </div>
</div>
</div>
<div class="row">
<div id="neighborhood">
<div id="tallhouse" class="col-sm-2 col-xs-2 col-sm-offset-1 col-xs-offset-1"> <img src="tallhouseCC.png" class="img-responsive" alt="Tall House" style="position: absolute;"> </div>
<div id="greenhouse" class="col-sm-2 col-xs-2" > <img src="greenhouseCC.png" class="img-responsive" alt="Green House" style="position: absolute;"> </div>
<div id="centerhouse" class="col-sm-2 col-xs-2" > <img src="centerhouseCC.png" class="img-responsive" alt="Center House" style="position: absolute;"></div>
<div id="italianhouse" class="col-sm-2 col-xs-2" > <img src="italianhouseCC.png" class="img-responsive" alt="Italian House" style="position: absolute;"> </div>
<div id="tealhouse" class="col-sm-2 col-xs-2" > <img src="tealhouseCC.png" class="img-responsive" alt="Teal House" style="position: absolute;"> </div>
</div>
</div>
CSS:
body {
min-height: 400px;
padding-top: 0px;
background-color: #0B0B3B;
}
#neighborhoodsky{
min-height: 150px;
}
#neighborhood{
margin-top: -500px;
}
#sky{
padding-bottom: 80px;
display: none;
}
#treeline{
position: absolute;
padding-top: 270px;
min-height: 30px;
top:-3%;
}
#yard{
margin-left: -600px;
}
jQuery :(在我的HTML文件的底部)
<!-- jQuery first, then Bootstrap JS. -->
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yard').stop().animate({
'marginLeft' : "+=825px" //moves down
});
$('#tallhouse').stop().animate({
'marginTop' : "+=775px" //moves down
});
$('#greenhouse').stop().delay(200).animate({
'marginTop' : "+=775px" //moves down
});
$('#centerhouse').stop().delay(400).animate({
'marginTop' : "+=775px" //moves down
});
$('#italianhouse').stop().delay(600).animate({
'marginTop' : "+=775px" //moves down
});
$('#tealhouse').stop().delay(800).animate({
'marginTop' : "+=775px" //moves down
});
$("#sky").stop().delay(1200).fadeIn(2000);
});
</script>
</body>
</html>
这是因为您的#sky
元素,使他的position: absolute
在CSS中是position: absolute
,或者使用JavaScript调整其padding
。 现在,当你使用jQuery fadeIn
它改变其display
从none
以block
它得到填充,所以它看起来像你的动画是laged,但它不是。
如果您不能对#sky
使用绝对位置, #sky
其样式更改为
#sky {
opacity: 0;
padding-bottom: 80px;
}
和javascript以:
$("#sky").stop().delay(1200).animate({'opacity': 1}, 2000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.