How to add Jquery easing effects | Jquery tutorial
Lets start with the a little introduction, easing refers to the acceleration and declaration that occurs during the course of an animation to give it a more responsive and natural feel. There are two types of easing methods that the core Jquery library supports, which are Linear and Swinglets us see how to implement this easing methods, but before that lets see a brief description on linear and swing easing methods.
Linear easing:
Linear easing method accelerates and deacclereates at a constant rate which makes it look fairly boring but it is good to know the linear easing might comin handy.
 |
| Linear Easing |
Swing easing:
Swing easing method starts off slowly before gaining speed and slows down again towards the end of the animation , which makes it look more natural compared to Linear easing
 |
| Swing easing |
<! DOCTYPE HTML>
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src="easing.js"></script><style>
div{ margin-left:5%; border:1px solid #999; border-radius:5px; width:350px; padding:6px; position: absolute; }
#al{ margin-top:0%; margin-left:50%;}
p{ height:150px; overflow:hidden;}
#anim{ position:absolute; margin-top:18%; margin-left:42%;}
#swing{ position:absolute; margin-top:22%; margin-left:42%;}
</style>
</head>
<body>
<div>
<p> type some text here </p>
</div>
<div id="al">
<p> type some text here </p>
</div>
<input name="animate" type="button" value="Linear" id="anim">
<input name="animate" type="button" value="Swing" id="swing">
<script type="text/javascript">
$('#anim').toggle(function() {
$('p').animate({'height':'+=150px'}, 2000, 'linear');
}, function() {
$('p').animate({'height':'-=150px'}, 2000, 'linear');
});
$('#swing').toggle(function() {
$('p').animate({'height':'-=150px'}, 2000, 'swing');
}, function() {
$('p').animate({'height':'+=150px'}, 2000, 'swing');
});
</script>
</body>
</html>
Comments
Post a Comment