Block animation, fadeIn to right

by alano

HTML

<div class="fade-right">
    <div class="container">
        <div class="photo-image">
            <img src="http://spaceflight.nasa.gov/gallery/images/shuttle/iss028e015556_small.jpg" alt="Space shuttle"/>
        </div><div class="photo-text">
            <span>All rights to NASA</span>
        </div>
    </div>
</div>

CSS

div.fade-right { 
    float:left; 
    position:absolute; 
    display:Xnone; }
div.container { 
    padding:20px; 
    background-color:Black; 
    text-align:center; 
    width:150px; }
div.photo-text {
    text-align:center; }
div.photo-text span { 
    color:White; 
    font-weight:bold;
    margin-top:10px; }
div.photo-image img {
    height:50%;
    width:50%; }
.fade-right .overlay {
    background-color:Yellow; 
    position:absolute;
    z-index:+1;
    top:0;
    left:0;
    width:100%;
    height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, 50% top, right top, from(rgba(255,255,255,1)), to(rgba(255,255,255,0))); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

}

JavaScript

var gradientCSS = "background-color:Yellow; /* for non-compatible browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, {lFade}% top, {rFade}% top, from(rgba(255,255,255,1)), to(rgba(255,255,255,0))); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */"
$(document).ready(function(){
    var $fades = $(".fade-right");
    var $overlay = $("<div class='overlay' />");
    $overlay.appendTo($fades);
    $overlay.animate({custom: 100%}, {
        duration: 1500,
        step: function(now, fx) {
            var stepCSS = gradientCSS.replace("{lFade}", parseString(100 - now));
        }                        
    });                
});