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: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
Post a Comment