En el presente tutorial aprenderemos cómo usar el método offset() de jquery y desarrollaremos un divertido ejemplo de animaciones.

Método Offset

El método $.offset () devuelve un objeto que contiene un valor numérico de la posición left y top, los que indican la posición actual de un elemento en relación al documento. Con este método podemos establecer las coordenadas referente a top y left. Veamos entonces un ejemplo, recuerda que necesitamos la librería jQuery (https://jquery.com/download/).

See the Pen MaBzNG by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Entonces, al dar click sobre la caja de color verde e inspeccionar nuestra consola JavaScript, veremos que el objeto devuelto contiene dos propiedades, las cuales son top y left:

Object {top: 10, left: 10}

La manera de acceder independientemente a cada una de estas propiedades tendría un comportamiento igual al de un objeto, debido a que la variable pos, sería un objeto.

See the Pen qOyQGG by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Como habíamos mencionado antes, a través del método offset también podemos establecer las coordenadas obtenidas, entonces mediante ellas haremos una animación básica.

See the Pen NGBEyb by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Al dar nuevamente click sobre la caja verde, veremos un movimiento constante que se dará sobre la caja, animándola.

De esta manera hemos aprendido a usar del método offset() y cómo manejar sus propiedades top y left. Recuerda que para aprender más sobre jQuery, JavaScript, HTML y CSS, cuentas con cursos disponibles en la plataforma devcode.la. El ejemplo práctico lo encuentras en este repositorio github. (https://github.com/JulioGrados/offsetJquery).