Conectarse
Pagerank
Últimos temas
Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Codigos CSS-HTML-JS
APRENDO EN...
TOMO RECURSOS DE...
RESEÑAS...
Propiedades Basicas Javascript: Efectos
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: Javascript
Página 1 de 1.
Propiedades Basicas Javascript: Efectos
TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE
#003 - Efectos
Recuerda que este tuto es parte de una serie de tutos, en la que se asume que has leído el anterior. También recuerda que se asume que manejas más o menos bien el HTML y CSS.
En el tuto anterior vimos que cuando sucede un evento determinado podemos hacer que se desencadene una serie de acciones, pero nos quedamos sin ver qué son esas acciones que pueden suceder. Eso es lo que trataremos en este tuto (;
1. Mostrar/Ocultar
Los efectos más populares son los de mostrar y ocultar elementos. Son los que se emplean para tablones, y displays de todo tipo. Veamos a algunos de ellos:
Efecto | Sintáxis |
Que algo con id #cajita se muestre aumentando su alto y ancho. | $('#cajita').show(duración); |
Que algo con id #cajita se oculte disminuyendo su alto y su ancho | $('#cajita').hide(duración); |
Que algo con id #cajita se muestre difuminándose hasta ser sólido. | $('#cajita').fadeIn(duración); |
Que algo con id #cajita se oculte difuminándose hasta desaparecer. | $('#cajita').fadeOut(duración); |
Que algo con id #cajita se muestre deslizándose hacia abajo. | $('#cajita').slideDown(duración); |
Que algo con id #cajita se oculte deslizándose hacia arriba. | $('#cajita').slideUp(duración); |
Cabe aclarar, además, que para mostrar un elemento el mismo debe estar oculto en primer lugar, es decir, debe contar con display:none; en su CSS.
Además de los efectos ya mencionados, hay algunos que nos permiten que el elemento se oculte si está visible y se muestre si está oculto:
Efecto | Sintáxis |
Que algo con id #cajita se muestre u oculte aumentando su alto y ancho. | $('#cajita').toggle(duración); |
Que algo con id #cajita se muestre u oculte difuminándose hasta aparecer o desaarecer. | $('#cajita').fadeToggle(duración); |
Que algo con id #cajita se muestre u oculte deslizándose hacia abajo o arriba. | $('#cajita').slideToggle(duración); |
2. Modificaciones al CSS del elemento
Otra cosa que podemos hacer es afectar el CSS de los elementos. Hay esencialmente dos formas de hacerlo: añadiéndole y quitándole clases (class-es, me refiero a selectores, sí) al elemento, o añadiéndole directamente propiedades de CSS. Veamos ambas opciones:
A. Añadir o quitar clases
Suena fácil. Es fácil. Supongamos que tenemos a un elemento con class "cajita" y queremos que al hacer click en algo a ese elemento le cambie el aspecto. Para eso, emplearemos una linea que vaya algo así como:
La primer parte, .removeClass('cajita'), le quitará a este elemento el class "cajita". La segunda parte, .addClass('shalala'), le añade un nuevo class: "shalala". Ahora, lo único que nos queda es ir al CSS y asignar a .shalala las propiedades que deseemos que adopte este elemento.$('.cajita').removeClass('cajita').addClass('shalala');
Esta función también tiene su versión toggle, que agrega la clase si no está y la quita si está. Adopta la forma de:
Además, en ambos casos podemos colocar varias clases separándolas con comas:$('.cajita').toggleClass('shalala');
B. Modificar propiedades CSS$('.cajita').toggleClass('shalala, cajita');
A veces el cambio que queremos hacer no requiere modificar quichicientas propiedades de CSS: a veces meramente queremos que le cambie el ancho a la caja, o se cambie el color de fondo, o esto, o aquello. Pequeños detalles por los que no vale la pena crear una nueva clase en nuestro CSS. Para esos momentos está la siguiente pequeña función:
Donde dice propiedad debemos colocar la propiedad de CSS que queremos afectar, y donde dice valor el valor que le asignaremos. Por ejemplo, si queremos que a #cajita le cambie el ancho por 300px, deberemos colocar:.css('propiedad', 'valor');
Este código puede llegar a tener algunos problemas con ciertas propiedades que tienen valores no-numéricos, pero es algo que varía de caso a caso.$('#cajita').css('width', '300px');
Bueno, eso fue breve ^^ En el próximo tuto, veremos qué podemos hacer cuando se da un evento. Cualquier duda, consulta, etc. ¡no duden en dejar su mensaje aquí mismo! (: Recuerden practicar para manejar todo cómodamente.
Sakura92- Webmaster
- Mensajes : 175
Puntos : 408842
Reputación : 2
Edad : 31
Temas similares
» Propiedades Basicas Javascript: Funciones Booleanas
» Propiedades Basicas Javascript: Eventos
» Propiedades Basicas Javascript: Introduccion
» Propiedades Basicas Javascript: Herramientas
» Propiedades Basicas Javascript: Modificaciones Via DOM
» Propiedades Basicas Javascript: Eventos
» Propiedades Basicas Javascript: Introduccion
» Propiedades Basicas Javascript: Herramientas
» Propiedades Basicas Javascript: Modificaciones Via DOM
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: Javascript
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
Dom Ene 03, 2016 2:36 pm por Sakura92
» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92
» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92
» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92
» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92
» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92
» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92
» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92
» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92
» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92
» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92
» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92
» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92
» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi
» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92
» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92
» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92
» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92
» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92
» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92
» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92
» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92
» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92
» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado
» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado
» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado
» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado
» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado
» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado
» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado
» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound
» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound
» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado
» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92
» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92
» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado
» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado
» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado
» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado
» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado
» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado
» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki
» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92
» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado
» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado
» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado
» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar
» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92
» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo
» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec