使用 .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中或者用javascript调整他的padding。现在，当您使用 jQuery fadeIn 时，它会将其 display 从 none 更改为 block 并获得填充，所以它看起来就像您的动画滞后了，但事实并非如此。
如果您不能为#sky 使用绝对位置，请将其样式更改为
#sky {
opacity: 0;
padding-bottom: 80px;
}
和 javascript 到:
$("#sky").stop().delay(1200).animate({'opacity': 1}, 2000);
关于javascript - jQuery 动画滞后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37899768/