Question

我正在努力找到正确的方法来解决这个问题我想要一个从0到100移动的栏，你有一个停止按钮，当你按下它时，栏会停止并显示一个数字。我试图在jquery中这样做。

Answer 1

利用jQuery.animate()和jQuery.stop()。这是一个SSCCE，只是复制'n'paste'n'run它。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2058493</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#progress .bar').animate({ width: '100%' }, 5000);
                $('#stop').click(function() { 
                    $('#count').text($('#progress .bar').stop().width());
                });
            });
        </script>
        <style>
            #progress {
                width: 100px;
                height: 20px;
                border: 1px black solid;
            }
            .bar {
                width: 0%;
                height: 20px;
                background: #00c;
            }
        </style>
    </head>
    <body>
        <div id="progress"><div class="bar"></div></div>
        <button id="stop">stop</button>
        <span id="count"></span>
    </body>
</html>

请注意，宽度以像素为单位。如果你在CSS中改变条形宽度，那么你需要做一些基本的数学计算，以便在span中得到它的百分比。

Jquery移动酒吧并停止0-100

1 个答案: