jQuery.animate.stop

我的“停止”按钮不能正常工作。通常情况下，第一次动画继续运行，然后再运行。我还想知道当单击stop时如何返回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();
            });
        }
    });
});

//HTML
开始
停止
//CSS
#包装纸{
高度：100%；宽度：100%；
文本对齐：居中；
}
#容器{
高度：300px；宽度：60px；
背景颜色：黄色；
显示：块；
保证金：20px自动；
位置：相对位置；
}
#仪表{
身高：0；
宽度：50px；
位置：绝对位置；
底部：0px；
背景颜色：蓝色；
利润率：0.5px；
}
钮扣{
宽度：75px；
高度：30px；
背景色：红色；
边界半径：15px；
位置：相对位置；
浮动：左；
显示：内联块；
}
//Javascript
$（文档）.ready（函数（）{
$（'#start'）。在（'click'，函数（）{
对于（var i=0；i我可以理解，您希望在
for循环
中的
#meter
上链接200个动画。但是，使用您的代码，您还可以创建300个jQuery对象，并附加100次相同的单击处理程序。您应该将一些代码移出循环

在#容器之前创建一个元素以显示HTML中的高度：

<div id = "display">Display height</div>

有关在.
$（“#米”）.stop（true，true）；
中使用回调的详细信息，谢谢，只添加第一个“true”就行了。第二个参数跳到了末尾，这不是我想要的。我如何显示高度？我想我可以通过“$（this.height（）；”获得它对吗？但是如何在页面上显示它呢？谢谢你，马丁。我不需要让for循环遍历200个动画，我如何让它循环直到单击停止按钮？@wannabeprogrammer在我的回答中看到版本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());
});

});

$(document).ready(function() {

var meter = $("#meter");

function run() { // define a function that runs only two animations
    // second animation gets a 'callback' to 'run' so after finishing
    // function 'run' is called again
    meter.animate({height:300}, 1000).animate({height: 0}, 1000, run);
}

$("#start").click(run); // START calls function 'run'

$('#stop').on('click', function () { // STOP is same as above
    $("#display").html(meter.stop(true).height());
});

});