JQuery es un Framework que nos facilita mucho la aplicación de efectos y diferentes acciones en nuestras páginas web. En seguida veremos cuales son los pasos a seguir para agregar efectos a elementos HTML utilizando este recurso.
Cómo agregar efectos a elementos HTML con jQuery
Por:Univision
Incluir jQuery
Para agregar un efecto a nuestros proyectos primeramente debemos agregar o hacer referencia al archivo jQuery en el cual se encuentran todas las funcionalidades que vamos a emplear; para ello entre la etiqueta de nuestro archivo html agregamos la siguiente línea de código:
Agregando efectos jQuery
Para agregar un efecto a nuestros elementos Html debemos pasar el identificador del elemento que se desee animar (o con el que se desea interactuar) y aplicar el efecto jQuery.
Por ejemplo en nuestro documento html agregamos la siguiente etiqueta de párrafo:
Click aquí
y en el código jQuery solo le damos animación de así:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Si damos clic en el elemento de párrafo este se ocultará (ya que esa es la función del método “hide()”)
Utilizando id y clases
Una segunda forma de agregar efectos a nuestros elementos html es por medio de su identificador ID, o una clase. Con una clase podemos agrupar varios elementos, mientras que con un “id” el elemento es único. Ejemplo:
A nuestro párrafo le agregamos el ID llamado “prueba”:
Click aqui
Ahora el código jQuery quedaría de la siguiente forma:
$(document).ready(function(){
$("#prueba").click(function(){
$(this).hide();
});
});
Nota que debemos anteponer el símbolo # antes del nombre para hacer referencia a un ID. Utilizando una clase es similar, solamente sustituye id = “prueba” por class=”Prueba_clase”, ahora para hacer referencia a esta clase en jQuery escribe “Prueba_clase”.
Ver también: ¿Qué es Apache Cordova?
Es sencillo animar elementos html, ahora lo que debes hacer es guiarte y usar los diferentes efectos jQuery disponibles.
Relacionados: