animate method in jQuery with example
1. animate() method performs a custom animation of a set of CSS properties.
2. The animate() method allows us to create animation effects on any numeric CSS property.
Example 1 : Animating height
<html>
<head><title>moving objects using animate</title>
<style type="text/css">
#box
{
background-color:Orange;
height:100px;
width:100px;
margin-left:40px;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#animate").click(function () {
$("#box").animate({
"height": "200px"
}, "slow");
});
});
</script>
</head>
<body>
<button id="animate">Animate</button>
<br />
<div id="box">
</div>
</body>
</html>
Demo :
In the above example, we are using animate method to animate the height of the div element.
Example 2 : Animating Width
<html>
<head><title>moving objects using animate</title>
<style type="text/css">
#box
{
background-color:Orange;
height:100px;
width:100px;
margin-left:40px;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#animate").click(function () {
$("#box").animate({
"width": "200px"
}, "slow");
});
});
</script>
</head>
<body>
<button id="animate">Animate</button>
<br />
<div id="box">
</div>
</body>
</html>
Demo :
In the above example, we are using animate method to animate the height of the div element.
Example 3 : Animating both height and width
<html>
<head><title>moving objects using animate</title>
<style type="text/css">
#box
{
background-color:Orange;
height:100px;
width:100px;
margin-left:40px;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#animate").click(function () {
$("#box").animate({
"width": "200px"
}, "slow");
$("#box").animate({
"height": "200px"
}, "slow");
});
});
</script>
</head>
<body>
<button id="animate">Animate</button>
<br />
<div id="box">
</div>
</body>
</html>
Demo :
In the above example, we have used different animate method to change height and width. As you can see in the above demo, first the div's width is animated and then followed by height. This is because the animation for height is queued, and waits for width animation to complete. We can stop queuing of animation by setting queue to false as shown in next example.
Example 4 : Animation with queue false
<html>
<head><title>moving objects using animate</title>
<style type="text/css">
#box
{
background-color:Orange;
height:100px;
width:100px;
margin-left:40px;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#animate").click(function () {
$("#box").animate({
"width": "200px"
}, "slow");
$("#box").animate({
"height": "200px"
}, { "queue": false, "duration": "slow" });
});
});
</script>
</head>
<body>
<button id="animate">Animate</button>
<br />
<div id="box">
</div>
</body>
</html>
Demo :
In the above example we have shown how to use two different animation. In above example, we are calling animation on height and width of div element one after the another. In the above case, animation will occur simultaneously as we have specified queue : false. This will not queue the animation.
Example 5: Moving and Fading
<html>
<head>
<title>animate</title>
<style>
#targetDiv
{
height:100px;
width:100px;
background-color:orange;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#myButton").click(function () {
$("#targetDiv").animate({
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
});
</script>
</head>
<body>
<div id="targetDiv"></div><br>
<input type="button" id="myButton" value="Animate">
<input type="button" id="reset" Value="Reset" onclick="location.reload()" />
</body>
</html>
In the above example, we have created a div element. On click of Animate button, we are animating the div element. CSS properties passed as parameter are applied to the div like an animation effect.
Example 6 : Rotating Objects
<html>
<head>
<title>Index</title>
<style type="text/css">
#box {
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#left").click(function () {
$('#box').animate({ textIndent: 0 }, {
step: function (now, fx) {
if (now == 0) {
fx.now = 90;
fx.start = 90;
}
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
},
duration: 2000
}, 'linear');
});
$("#right").click(function () {
$('#box').animate({ textIndent: 180 }, {
step: function (now, fx) {
if (now == 180) {
fx.now = 90;
fx.start = 90;
}
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
},
duration: 2000
}, 'linear');
});
});
</script>
</head>
<body>
<div id="box"></div><br /><br />
<button id="left">Rotate Left</button>
<button id="right">Rotate Right</button>
</body>
</html>
Demo :
In the above example, we have used animate method to rotate a div element. On clickint the button, using animate method we are changing its textIndent property, once that animation is done, step function is called which in turn modifies the css.
Example 7 : Moving Object
<html>
<head><title>moving objects using animate</title>
<style type="text/css">
#box
{
background-color:Orange;
height:100px;
width:100px;
margin-left:40px;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#left").click(function () {
$("#box").animate({
"marginLeft": "-=40px"
}, "slow");
});
$("#right").click(function () {
$("#box").animate({
"marginLeft": "+=40px"
}, "slow");
});
});
</script>
</head>
<body>
<div id="box">
</div><br />
<br />
<button id="left"><<</button>
<button id="right">>></button>
</body>
</html>
Demo :
In the above example, we have used animate method to move objects right and left. On click of button we are changing style property of margin-left using animate method, which gives it animation affect.
0 comments:
Post a Comment