Suggested Videos
Part 45 - jquery image slideshow with thumbnails
Part 46 - jquery animate function
Part 47 - jquery animation queue
(追記) (追記ここまで)
In this video we will discuss how to create a simple animated jquery progress bar using animate() function.
(追記) (追記ここまで)
simple jquery progress bar
jQuery tutorial for beginners
Part 45 - jquery image slideshow with thumbnails
Part 46 - jquery animate function
Part 47 - jquery animation queue
(追記) (追記ここまで)
In this video we will discuss how to create a simple animated jquery progress bar using animate() function.
(追記) (追記ここまで)
simple jquery progress bar
<html>
<head>
<scriptsrc="jquery-1.11.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$('#myButton').click(function () {
animateProgressBar($('#ddlPercentage').val());
});
function animateProgressBar(percentageCompleted) {
$('#innerDiv').animate({
'width': (500 *
percentageCompleted) / 100
}, 3000);
$({ counter: 1 }).animate({ counter:
percentageCompleted }, {
duration: 3000,
step: function () {
$('#innerDiv').text(Math.ceil(this.counter) + ' %');
}
})
}
});
</script>
</head>
<bodystyle="font-family:Arial">
Select Percentage :
<selectid="ddlPercentage">
<optionvalue="10">10</option>
<optionvalue="20">20</option>
<optionvalue="30">30</option>
<optionvalue="40">40</option>
<optionvalue="50">50</option>
<optionvalue="60">60</option>
<optionvalue="70">70</option>
<optionvalue="80">80</option>
<optionvalue="90">90</option>
<optionvalue="100">100</option>
</select>
<inputtype="button"id="myButton"value="Start
Animation"/>
<br/><br/>
<divid="outerDiv"style="background-color:#EEEEEE;
height:20px; width:500px; padding:5px">
<divid="innerDiv"style="background-color:red; height:19px;
width:0px; color:white; text-align:center">
</div>
</div>
</body>
</html>
jQuery tutorial for beginners
No comments:
Post a Comment
It would be great if you can help share these free resources
[フレーム]