Block animation, fadeIn to right

by Ali Khaled

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:none; }
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%; }

JavaScript

$(document).ready(function(){
    $(".fade-right").animate({left:200, opacity:"show"}, 1500);
});