我的＆＃34;停止＆＃34;按钮无法正常工作。通常是动画第一次继续运行然后它继续运行。我也想知道如何在点击停止并返回显示它时返回div的高度。
//HTML
<div id = "wrapper">
<div id = "container">
<div id = "meter"></div>
</div>
<button id ="start">START</button>
<button id ="stop">STOP</button>
</div>
//CSS
#wrapper {
height: 100%; width: 100%;
text-align: center;
}
#container {
height: 300px; width: 60px;
background-color: yellow;
display: block;
margin: 20px auto;
position: relative;
}
#meter {
height: 0;
width: 50px;
position: absolute;
bottom: 0px;
background-color: blue;
margin: 0 5px;
}
button {
width: 75px;
height: 30px;
background-color: red;
border-radius: 15px;
position: relative;
float: left;
display: inline-block;
}
//Javascript
$(document).ready(function() {
$('#start').on('click', function () {
for(var i = 0; i<100; i++) {
$("#meter").animate({height:300}, 1000);
$("#meter").animate({height: 0}, 1000);
$('#stop').on('click', function () {
$("#meter").stop();
});
}
});
});
答案 0 :(得分：1)
我可以理解您要在#meter的{{1}}上链接200个动画。但是使用您的代码，您还可以创建300个jQuery对象，并将相同的单击处理程序附加100次。你应该把一些代码移出循环。
创建一个元素，在#container：
之前显示HTML中的高度for-loop你的JS看起来像：
<div id = "display">Display height</div>
VERSION 2：您可以使用$(document).ready(function() {
var meter = $("#meter"); // create jQuery-object once and store it
$('#start').on('click', function () { // setup for the start-button
// create 200 animations
for(var i = 0; i<100; i++) {
// reference to the variable and chain the jQuery functions
meter.animate({height:300}, 1000).animate({height: 0}, 1000);
}
});
$('#stop').on('click', function () { // setup for the stop-button separate
// stop animations, clear animation queue, get height of meter, get display-element
// set its content to the meter height, and all that with one line
$("#display").html(meter.stop(true).height());
});
});
的{{1}}来递归调用动画函数，而不是链接200个动画，因此它会在无限循环中运行（可停止当然如上）：
complete-callback有关在.animate() reference中使用回调的详细信息。