Skip to main content

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

    jquery-easing-effects



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:55%;}
#div1,#div2{ margin-top:10%;}
#easeOutBounce{ margin-left:27%;}
p{ font-family:Calibri; font-size:20px; text-align:center; font-weight:bold; }
</style>
</head>
<body>
<div id="div1">
<p> I'm In love with Jquery </p>
</div>
<div id="div2">
<p> I'm In love with Jquery </p>
</div>
<div id="div3">
<p> I'm In love with Jquery </p>
</div>
<div id="div4">
<p> I'm In love with Jquery </p>
</div>

<div id="butns">
<input name="animate" type="button" value="easeOutBounce" id="easeOutBounce">
<input name="animate" type="button" value="easeInOutExp" id="easeInOutExpo">
<input name="animate" type="button" value="easeInOutExp" id="easeOutCirc">
<input name="animate" type="button" value="easeOutElastic" id="easeOutElastic">
</div>

<script type="text/javascript">
$('#easeOutBounce').toggle(function() {
$('p').animate({'height':'+=70px'}, 2000, 'easeOutBounce');
}, function() {
$('p').animate({'height':'-=70px'}, 2000, 'easeOutBounce');
});

$('#easeInOutExpo').toggle(function() {
$('p').animate({'height':'+=70px'}, 2000, 'easeInOutExpo');
}, function() {
$('p').animate({'height':'-=70px'}, 2000, 'easeInOutExpo');
});

$('#easeOutCirc').toggle(function() {
$('p').animate({'height':'+=70px'}, 2000, 'easeOutCirc');
}, function() {
$('p').animate({'height':'-=70px'}, 2000, 'easeOutCirc');
});

$('#easeOutElastic').toggle(function() {
$('p').animate({'height':'+=70px'}, 2000, 'easeOutElastic');
}, function() {
$('p').animate({'height':'-=70px'}, 2000, 'easeOutElastic');
});

</script>

</body>
</html>

Comments

  1. I really appreciate on your post. I really needed to know about it.... I tried to write something similar to your blog... read more

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. I am very amazed by the information of this blog and i am glad that I had a look over the blog. Thank you so much for sharing such great information. It really helped me a lot.

    ReplyDelete

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



CSS Sprites | What are They?

CSS Sprites most web developers should have heard this term, so what is it ?.
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.

Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.

Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools a…