How to Create Effective Animation in JQuery
In this article I am going to explain about create effective animation in jquery.
jQuery Animate() Method in different style
We can use jquery animate() method we can create different type of animation. Such as change color, size change, text aliment change etc. An animation is followinh.
Example
|
<html>
<head>
<script src="jquery.js"></script>
<style>
#bt1
{
padding: .5em 1em;
text-decoration: none;
}
#dvm
{
width: 240px;
height: 75px;
padding: 0.4em;
position: relative;
background: yellow;
}
</style>
<script>
$(function () {
$("#bt1").toggle(
function () {
$("#dvm").animate({
width: 500
}, 1000);
},
function () {
$("#dvm").animate({
width: 240
}, 1000);
}
);
});
</script>
<div id="dvm">
<p>
Hiii... Hello how are you. Where are you living in this time. This is fun
</p>
</div>
<button id="bt1">
click me</button>
</head>
</html>
|
Output
Before click button
After click button
You may also want to read these related articles: here
Ask Your Question
Got a programming related question? You may want to post your question here