<!DOCTYPE html>
<html lang="en-US">
  <head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JGraber</title>
    <style type="text/css">
    .blue {
    	background-color: blue;
    	margin: 10px;
    	color: white;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 450px;
      left: 250px;
    }
	</style>
	
	<script type="text/javascript">
  var Left = function(){
     $('#play').animate({left: "-=50px"}, 1000);
  };
  var Right = function(){
     $('#play').animate({left: "+=50px"}, 1000);
  };
  var Down = function(){
    $('#play').animate({top: "+=50px"}, 1000);
  };
  var Up = function(){
    $('#play').animate({top: "-=50px"}, 1000);
  }; 
  var Invisible = function(){
    $('#play').css({visibility: "hidden"});
  }; 
    var Show = function(){
    $('#play').css({visibility: "visible"});
  };
	</script>
  </head>
  <body>
   <h1>Transform Elements</h1>
   <pre>
var Left = function(){
   $('#play').animate({left: "-=50px"}, 1000);
};
var Right = function(){
   $('#play').animate({left: "+=50px"}, 1000);
};
var Down = function(){
  $('#play').animate({top: "+=50px"}, 1000);
};
var Up = function(){
  $('#play').animate({top: "-=50px"}, 1000);
};
var Invisible = function(){
  $('#play').css({visibility: "hidden"});
}; 
var Show = function(){
  $('#play').css({visibility: "visible"});
};
   </pre>

    <button onclick="Left()">&lt;-- Move Left</button>
    <button onclick="Right()">Move Right --&gt;</button>
    <button onclick="Down()">Move Down</button>
    <button onclick="Up()">Move Up</button>
    <button onclick="Invisible()">Hide</button>
    <button onclick="Show()">Show</button>
    <div id="play" class="blue">
    Box
    </div>
  </body>
</html>

Add example to trasform elements
Add example to trasform elements
