0
.animate（）メソッドを使用しているときにjQueryアニメーションの遅れに問題があります。私は問題を解決しようとするために.stop（）メソッドを使用しようとしましたが、役に立たない。私は、画面が始まり、ページが読み込まれると連続して落ちる一連の写真を持っています。jQuery animation lags
問題は、最初の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>
？ – midda25
あなたの質問を[fiddle]（https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers）に編集できますか？また、 '
一度に7つのアニメーションを実行します。これは理由かもしれません。私は、これらの要素のクラスを使って同じアニメーションの下で同じ775ピクセルの移動を行う5つを再編成しようとします。あなたは一度に3つのアニメーションを持っていただろう...より良いはずです。 CSS @keyframeを探すことは、今のようにそれぞれ異なるタイミングを設定できるので、素晴らしいアイデアです。 –