Skip to main content

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 Swing lets 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
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
Swing easing

           Download Demo


<! 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

  1. I see your "brief description on linear and swing easing methods", but I don't see your tutorial. There is just your code, script and html, "Download Demo" link is dead as well.
    Is this a live work in progress?
    Is the tutorial still to come?

    ReplyDelete
    Replies
    1. Hey Unknown thanks for pointing out
      i have updated the download link for easing tutorial

      Delete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Popular posts from this blog

Adding a button in HTML | styling a button

To add a button in a HTML page use <input> tags and specify the type as button like so
<input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1
Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here



Advanced Jquery easing | Demo and Download

Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic



to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods.
Download DEMO

<! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div3,#div4{ margin-top:…