{"id":751,"date":"2015-03-27T21:06:24","date_gmt":"2015-03-27T21:06:24","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=751"},"modified":"2015-08-26T20:40:25","modified_gmt":"2015-08-26T20:40:25","slug":"como-crear-animaciones-con-jquery","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/","title":{"rendered":"Como crear animaciones con jquery"},"content":{"rendered":"

\"jquery_logo\"<\/a>Jquery <\/strong>realmente nos da una tremenda ayuda con su function animate<\/strong> para crear diversos efectos y animaciones desde basicas como complejas. Ya el uso de flash es una practica desde ya muchos a\u00f1os atras por motivos que hable ya en un articulo anterior por que no usar flash<\/a> y eso por eso que tomo mucho peso el uso de javascript <\/strong>para las animaciones que en algun tiempo lo hizo flash.<\/p>\n

Jquery es el framework mas usado en proyectos web<\/strong> y personalmente es el framework que uso y este articulo sera basado con jquery y para comenzar debes saber:<\/p>\n

Que es un callback?<\/h4>\n

quiere decir \u00abuna devoluci\u00f3n de llamada o retrollamada\u00bb y nos sirve para correr alguna funcion cuando termine un proceso previo.<\/p>\n

animate de jquery<\/strong> tiene un callback que nos servira para el desarrollo en la animacion entonces esta es la estructura.<\/p>\n\n

$(<\/span>"elemento"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginTop:<\/span>100<\/span>}<\/span>,<\/span>1000<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n\/*colocas tus instrucciones que se ejecutaran al terminar la animacion*\/<\/span>\n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
explico el codigo que primero seleccionado a la etiqueta del html con nombre elemento y le pasamos animate con una instruccion que es darle un margin top de 100px con una velocidad de 1 segundo (se trabaja en milisegundos) y esa funcion que vez al final es el llamado callback.<\/p>\n
entonces en la parte donde indicamos el margin top es la parte donde podemos agregar todo el css para que se realize la animacion y vamos hacer un ejemplo basico que seria que se mueva un cuadro que creamos con css pero esto sucedera cuando cargue el DOM.<\/p>\n\n
#cuadrado<\/span>{<\/span>\n width<\/span>:<\/span>200px<\/span>;<\/span>\n height<\/span>:<\/span>200px<\/span>;<\/span>\n background<\/span>:<\/span>red<\/span>;<\/span>\n}<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n\n
&lt; div id="cuadrado"&gt;&lt; \/div&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n
entonces al darle 100 pixeles a la izquierda y nos da el efecto del movimiento a la derecha<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n \n  $(<\/span>"#cuadrado"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginLeft:<\/span>100<\/span>}<\/span>,<\/span>2000<\/span>)<\/span>\n \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ahora al ejemplo anterior implementamos el callback<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n \n  $(<\/span>"#cuadrado"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginLeft:<\/span>100<\/span>}<\/span>,<\/span>2000<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    console.log<\/span>(<\/span>'al terminar el movimiento esto se va a imprimir'<\/span>)<\/span>\n  }<\/span>)<\/span>\n \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
y aprovechamos el callback para que al finalizar realize otro movimiento pero bajando la velocidad y esto va hacer 2 movimientos fluidos<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n \n  $(<\/span>"#cuadrado"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginLeft:<\/span>100<\/span>}<\/span>,<\/span>2000<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n     $(<\/span>this<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginTop:<\/span>100<\/span>}<\/span>,<\/span>1000<\/span>)<\/span>\n  }<\/span>)<\/span>\n \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ahora puedes seguir haciendo el movimiento n veces usando un callback despues de otro<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n \n  $(<\/span>"#cuadrado"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginLeft:<\/span>100<\/span>}<\/span>,<\/span>2000<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n     $(<\/span>this<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>marginTop:<\/span>100<\/span>}<\/span>,<\/span>1000<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        \/*puedes colocar n veces animate*\/<\/span>\n     }<\/span>)<\/span>\n  }<\/span>)<\/span>\n \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
 <\/p>\n
hasta aqui es lo tipico y comun que ense\u00f1an pero vamos hacer otros ejemplos que nos ayuden a comprender mejor y abra nuestra mente de la potencia.<\/p>\n
hace un tiempo me pidieron hacer un efecto en un intro con javascript y que es esta web http:\/\/piaverme.com y lo explico paso a paso como lo hice para que tengan mejor idea de como usarlo en un momento real de desarrollo.<\/p>\n
tenemos en el html<\/p>\n\n
&lt; a href="inicio.php"&gt;&lt; img src="images\/logo-intro.png" id="logo-intro" \/&gt;&lt; \/a&gt;\r\n&lt; div id="linea1"&gt;&lt; \/div&gt;\r\n&lt; div id="linea2"&gt;&lt; \/div&gt;\r\n&lt; div id="linea3"&gt;&lt; \/div&gt;\r\n&lt; div id="linea4"&gt;&lt; \/div&gt;<\/pre><\/td><\/tr><\/table><\/div>\n\n
a las lineas no le damos el ancho aun pero sera necesario por que cuando es position absolute es obligatorio colocarlo pero eso lo capturamos con javascript<\/p>\n\n
img#logo-intro<\/span> {<\/span>\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\n  bottom<\/span>:<\/span> 150px<\/span>;<\/span>\n  left<\/span>:<\/span> 50%<\/span>;<\/span>\n  margin-left<\/span>:<\/span> -256px<\/span>;<\/span>\n}<\/span>\ndiv#linea1<\/span> {<\/span>\n  width<\/span>:<\/span> 3px<\/span>;<\/span>\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\n  background<\/span>:<\/span> #fff<\/span>;<\/span>\n}<\/span>\ndiv#linea2<\/span> {<\/span>\n  width<\/span>:<\/span> 3px<\/span>;<\/span>\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\n  background<\/span>:<\/span> #fff<\/span>;<\/span>\n}<\/span>\ndiv#linea3<\/span> {<\/span>\n  width<\/span>:<\/span> 3px<\/span>;<\/span>\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\n  background<\/span>:<\/span> #fff<\/span>;<\/span>\n}<\/span>\ndiv#linea4<\/span> {<\/span>\n  width<\/span>:<\/span> 3px<\/span>;<\/span>\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\n  background<\/span>:<\/span> #fff<\/span>;<\/span>\n}<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ahora para que pase el efecto que los elementos entren es simple pero debes hacer que esten fuera las lineas pero antes como habia comentado en arriba vamos a dar la medida del ancho que tiene las lineas pero para que sea el efecto que ocupe el 100% del browser lo capturamos por javascript y por que no con css? simple por que esta en posicion absoluta y por defecto no va a ocupar el 100% y por que no colocamos la medidas del ancho por que estarias trabajando con 1 medida pero recuerda que sera visto por varios monitores con distintas medidas.<\/p>\n\n
$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n\/*primero vamos a obtener la posicion del logo  que nos devuelve el top y el left del elemento*\/<\/span>\nposicion=<\/span>$(<\/span>"#logo-intro"<\/span>)<\/span>.position<\/span>(<\/span>)<\/span>;<\/span> \n\/*esta parte ya no la explicare ya que puede llegar extenso y no es el punto realmente pero basicamente esto hace que las 4 lineas esten ubicadas fuera del browser y en la posicion adecuada para entrar luego con animate*\/<\/span>\n$(<\/span>"#linea1"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"width"<\/span>:<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>,<\/span>"left"<\/span>:-<\/span>(<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>)<\/span>,<\/span>"top"<\/span>:<\/span>posicion.top<\/span>}<\/span>)<\/span>\n$(<\/span>"#linea2"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"width"<\/span>:<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>,<\/span>"left"<\/span>:<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>*<\/span>2<\/span>,<\/span>"top"<\/span>:<\/span>posicion.top<\/span>-<\/span>212<\/span>}<\/span>)<\/span>\n$(<\/span>"#linea3"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"height"<\/span>:<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>,<\/span>"left"<\/span>:<\/span>posicion.left<\/span>-<\/span>256<\/span>,<\/span>"top"<\/span>:-<\/span>(<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>)<\/span>}<\/span>)<\/span>\n$(<\/span>"#linea4"<\/span>)<\/span>.css<\/span>(<\/span>{<\/span>"height"<\/span>:<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>,<\/span>"left"<\/span>:<\/span>posicion.left<\/span>+<\/span>256<\/span>,<\/span>"top"<\/span>:<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>*<\/span>2<\/span>}<\/span>)<\/span>\n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ya teniendo ordenado los elementos hacemos el efcto de las entradas.<\/p>\n\n
\/*hacemos que funcione el efecto cuando todo las peticiones este cargadas*\/<\/span>\n$(<\/span>window)<\/span>.load<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>"#linea1"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"left"<\/span>:<\/span>"0"<\/span>}<\/span>,<\/span>2000<\/span>,<\/span>"easeInOutCubic"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        $(<\/span>"#linea2"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"left"<\/span>:<\/span>"0"<\/span>}<\/span>,<\/span>1000<\/span>,<\/span>"easeInOutCubic"<\/span>)<\/span>\n    }<\/span>)<\/span>\n    $(<\/span>"#linea3"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"top"<\/span>:<\/span>"0"<\/span>}<\/span>,<\/span>2000<\/span>,<\/span>"easeInOutCubic"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n        $(<\/span>"#linea4"<\/span>)<\/span>.animate<\/span>(<\/span>{<\/span>"top"<\/span>:<\/span>"0"<\/span>}<\/span>,<\/span>1500<\/span>,<\/span>"easeInOutCubic"<\/span>)<\/span>\n    }<\/span>)<\/span>\n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
aqui empleamos los callback y ademas podemos ver que juego con las velocidades pero adicionalmente he agregado un atributo a la funcion pero si no lo colocas por defecto ya tiene uno pero jquery tiene unos cuantos tipos de efectos de movimientos entonces para ampliar estos movimientos puedes agregar a tu proyecto un plugins \u00abjQuery Easing<\/a>\u00bb que hace que podamos usar mas movimientos.<\/p>\n","protected":false},"excerpt":{"rendered":"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas. Ya el uso de flash es una practica desde ya muchos a\u00f1os atras por motivos que hable ya en un articulo anterior por que no usar flash y eso por eso que tomo mucho[…]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,14],"tags":[88,86,87,84,85,17],"class_list":["post-751","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-animacion-html5","tag-animacion-jquery","tag-animaciones","tag-animate","tag-ejemplo-animate","tag-jquery-2"],"yoast_head":"\nComo crear animaciones con jquery<\/title>\n<meta name=\"description\" content=\"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como crear animaciones con jquery\" \/>\n<meta property=\"og:description\" content=\"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-27T21:06:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-08-26T20:40:25+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Como crear animaciones con jquery\",\"datePublished\":\"2015-03-27T21:06:24+00:00\",\"dateModified\":\"2015-08-26T20:40:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\"},\"wordCount\":583,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png\",\"keywords\":[\"animacion html5\",\"animacion jquery\",\"animaciones\",\"animate\",\"ejemplo animate\",\"jquery\"],\"articleSection\":[\"JAVASCRIPT\",\"Jquery\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\",\"name\":\"Como crear animaciones con jquery\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png\",\"datePublished\":\"2015-03-27T21:06:24+00:00\",\"dateModified\":\"2015-08-26T20:40:25+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"description\":\"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.\",\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png\",\"width\":300,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear animaciones con jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como crear animaciones con jquery","description":"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/","og_locale":"es_ES","og_type":"article","og_title":"Como crear animaciones con jquery","og_description":"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.","og_url":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2015-03-27T21:06:24+00:00","article_modified_time":"2015-08-26T20:40:25+00:00","og_image":[{"url":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png","type":"","width":"","height":""}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Como crear animaciones con jquery","datePublished":"2015-03-27T21:06:24+00:00","dateModified":"2015-08-26T20:40:25+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/"},"wordCount":583,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png","keywords":["animacion html5","animacion jquery","animaciones","animate","ejemplo animate","jquery"],"articleSection":["JAVASCRIPT","Jquery"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/","url":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/","name":"Como crear animaciones con jquery","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage"},"thumbnailUrl":"http:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png","datePublished":"2015-03-27T21:06:24+00:00","dateModified":"2015-08-26T20:40:25+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"description":"Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas.","breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2015\/03\/jquery_logo.png","width":300,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-animaciones-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear animaciones con jquery"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=751"}],"version-history":[{"count":12,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/751\/revisions"}],"predecessor-version":[{"id":852,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/751\/revisions\/852"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}