No es exactamente lo mismo pero hace poco salió un tema que puede que te sirva de ejemplo:
http://www.forosdelweb.com/f13/mover...jquery-953308/
Modificándolo un poco para que se adapte a tu html.
Código CSS:
Ver original#text{display:none; margin-left:-100px}
Código Javascript
:
Ver original$(function(){
$('#pen').click(function() {
$('#text').animate( {marginLeft:0,opacity:"show"}, 2000, "linear" );
});
});
Esto haría que la capa "#text" se mostrase de izquierda a derecha y pasando de transparente a opaco (es mejor que lo pruebes y veas el resultado).