Difference between revisions of "Animate"
Jump to navigation
Jump to search
(→Jquery) |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 19: | Line 19: | ||
'font-size': '120%' | 'font-size': '120%' | ||
}, 3000,easeInOutElastic); | }, 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 | // 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]] | ||
Latest revision as of 16:36, 15 February 2017
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