JQuery tutorial: Animation


JQuery

Animation

With JQuery you can make animations to the HTML elements by using the animate() function. In this example, The first argument of the animate() are the style attributes and their values. The second argument is the speed(3000) in millisecond.
Example:
<html>
<head><title>Animating HTML elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var i=0;
$(document).ready(function(){

$("button").click(function(){
if(i==0){$("div").animate({
opacity: 0.4,
width: "100px",
height: "100px"},3000); i=1;}
else {$("div").animate({
opacity: 1,
width: "400px",
height: "30px"},3000); i=0;}
});


});

</script>

</head>
<body>
<div>JQuery is powerful and fun. Web developers should know.</div>
<button>Click to animate</button>
</body>
</html>

Another way to animate HTML elements is using fadeOut() and fadeIn() functions.
Example:
<html>
<head><title>Animating HTML elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#div1").show(function(){$("#div2").hide();});
$("#div1").fadeOut(2000,function(){$("#div2").fadeIn(2000);});

});

</script>

</head>
<body>
<div id="div1">Welcome to</div>
<div id="div2">The world of JQuery!</div>
</body>
</html>



Comments





This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.