Thank You! fade in sequentially & animate, EASEOUTBOUNCE down during fade

Thank You! fade in sequentially & animate, EASEOUTBOUNCE down during fade

by george_black

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 {position:relative; top:-100px; color:#fff; font-weight:bold; font-family:sans-serif; padding-left:5px;}
.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
$(".faded").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 100).animate({ opacity: 1, "top": "+=100px" }, 1500, "easeOutBounce" );
    $('.bold').css('background-color','#c6531d');
    $('.out').css('background-color','#64a8af');
    $('.wrong').css('background-color','#bf2d31');
    $('.stuff').css('background-color','#b69165');
    $('.small').css('background-color','#bdb318');
    $('.forward').css('background-color','#849E19');
    $('.credit').css('background-color','#131313');
});
$(".faded").on('hover',function(delay) {
    $(this).css('display', 'none').animate({ opacity: 1 }, 0).delay(delay * 100).animate({ opacity: 1, "top": "-=100px" }, 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/