Jquery moving bar and stopping 0-100
I am trying to find the right way to go 开发者_运维技巧about this i am trying to get a bar that move from 0 - 100 and you got a stop button and when you press it the bar will stop and display a number. i am trying to do this in jquery.
Make use of jQuery.animate() and jQuery.stop(). Here's an SSCCE, just copy'n'paste'n'run it.
<!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>
Note that the width is in pixels. If you change the bar's width in CSS, then you'll need to do some basic math to get it in percents in the span.
加载中,请稍侯......
精彩评论