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,

Check out

CSS Sprites | What are They?

Login form | Using CSS3

Remove Scrollbars from syntaxhighlighter

Adding a button in HTML | styling a button

HTML5 Semantic Tags | What do they mean

How to remove plus and minus characters from input type number

HTML5 | LocalStorage

jQuery Resources | Support and tutorial help

How CSS3 Works