Animate Opacity / Fade in Elements

by DavisC_WL

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="faded bold">Thank,</div>
<div class="faded out">Thank,</div>
<div class="faded wrong">Thank,</div>
<div class="faded stuff">Thank,</div>
<div class="faded small">Thank,</div>
<div class="faded forward">Thank,</div>
<div class="faded credit">Thank You!</div>

CSS

.faded { color:#fff; font-weight:bold; font-family:sans-serif; padding-left:5px; background:#333;}
.credit a, .credit a:visited {color:#ccc; text-decoration:none;}
.credit a:hover, .credit a:active {color:#bbb;text-decoration:underline;}

JavaScript

//Thank You! fade in sequentially & animate, EASEOUTBOUNCE down during fade
$("div").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 100).animate({ opacity: 1 }, 1500, "easeOutBounce" );
});
//add diff easing properties to make it more swift

//for clear use of easing/instructs - http://easings.net/
//for easing cdn - http://cdnjs.com/