Difference between revisions of "Animate"
Jump to navigation
Jump to search
Line 28: | Line 28: | ||
// you have to install jquery UI to get the Easein functiolality | // you have to install jquery UI to get the Easein functiolality | ||
</pre> | </pre> | ||
== | == http://easings.net/ Different ease animations] == | ||
<br> | |||
[[#top|Back To Top]]< — >[[JQuery|Category]]< — >[[Main_Page| Home]] | [[#top|Back To Top]]< — >[[JQuery|Category]]< — >[[Main_Page| Home]] |
Revision as of 17:21, 28 December 2016
Animate
HTML
<div id="filters"> <button id="filter-berry">Toggle berry flavors</button> <!-- <button id="filter-citrus">Toggle citrus</button> --> </div>
Jquery
$('#filter-berry').click(function(e) { e.preventDefault(); $('#cart-water').find('.berry') .animate({ 'margin-left': '50', 'height': '70', 'opacity': '.5', 'font-size': '120%' }, 3000,easeInOutElastic); }); // you can also add a callback function that runs after the animation. }, 3000,easeInOutElastic, function(){ $(this).remove(); }); // you have to install jquery UI to get the Easein functiolality
http://easings.net/ Different ease animations]
Back To Top< — >Category< — > Home