jQuery
- Include in your document's
<head>
<head>
<link rel="stylesheet" href="animate.min.css">
<script src="animate.js"></script>
</head>-
call
$(...).animateCss(EFFECT_NAME)to the element you want to animate.You may also add the word
infiniteafter EFFECT_NAME for an infinite loop.Use optional "in" or "out" parameters to apply the effect while showing or hiding.
-
These are the availables effect names:
bouncebounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflashflipInXflipInYflipOutXflipOutYheadShakehingejackInTheBoxjellolightSpeedInlightSpeedOutpulserotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRightrollInrollOutrubberBandshakeslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUpswingtadawobblezoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUp
Full example:
<h1 id="title">Example</h1>$("#title").animateCss("bounce");//Bounce one
Loop:
$("#title").animateCss("bounce infinite");//Bounce loop
Show:
$("#title").animateCss("bounceIn","in");//Bounce show
Hide:
$("#title").animateCss("bounceOut","out");//Bounce hide
Luca Colombi from (http://ethicsoft.it)
Animate.js is licensed under the MIT license. (http://opensource.org/licenses/MIT)