AnshiG
Bienvenidos a AnshiG.!!

Unirse al foro, es rápido y fácil

AnshiG
Bienvenidos a AnshiG.!!
AnshiG
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Propiedades Basicas Javascript: Efectos EmptyDom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Propiedades Basicas Javascript: Efectos EmptyDom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Propiedades Basicas Javascript: Efectos EmptyVie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Propiedades Basicas Javascript: Efectos EmptyLun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Propiedades Basicas Javascript: Efectos EmptyLun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Propiedades Basicas Javascript: Efectos EmptyJue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Propiedades Basicas Javascript: Efectos EmptyJue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Propiedades Basicas Javascript: Efectos EmptyJue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Propiedades Basicas Javascript: Efectos EmptyJue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Propiedades Basicas Javascript: Efectos EmptyJue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Propiedades Basicas Javascript: Efectos EmptyMar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Propiedades Basicas Javascript: Efectos EmptyMar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Propiedades Basicas Javascript: Efectos EmptyMar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Propiedades Basicas Javascript: Efectos EmptyLun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Propiedades Basicas Javascript: Efectos EmptyVie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Propiedades Basicas Javascript: Efectos EmptyLun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Propiedades Basicas Javascript: Efectos EmptyMiér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Propiedades Basicas Javascript: Efectos EmptyMiér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Propiedades Basicas Javascript: Efectos EmptyVie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Propiedades Basicas Javascript: Efectos EmptyMiér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Propiedades Basicas Javascript: Efectos EmptyMar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Propiedades Basicas Javascript: Efectos EmptyMiér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Propiedades Basicas Javascript: Efectos EmptyLun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Propiedades Basicas Javascript: Efectos EmptyLun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Propiedades Basicas Javascript: Efectos EmptySáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Propiedades Basicas Javascript: Efectos EmptyVie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Propiedades Basicas Javascript: Efectos EmptyVie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Propiedades Basicas Javascript: Efectos EmptyDom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Propiedades Basicas Javascript: Efectos EmptyDom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Propiedades Basicas Javascript: Efectos EmptyJue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Propiedades Basicas Javascript: Efectos EmptyVie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Propiedades Basicas Javascript: Efectos EmptyMiér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Propiedades Basicas Javascript: Efectos EmptyDom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Propiedades Basicas Javascript: Efectos EmptyJue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Propiedades Basicas Javascript: Efectos EmptyJue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Propiedades Basicas Javascript: Efectos EmptyMiér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Propiedades Basicas Javascript: Efectos EmptyMar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Propiedades Basicas Javascript: Efectos EmptyJue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Propiedades Basicas Javascript: Efectos EmptyMar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Propiedades Basicas Javascript: Efectos EmptyMar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Propiedades Basicas Javascript: Efectos EmptyLun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Propiedades Basicas Javascript: Efectos EmptyVie Abr 12, 2013 2:46 pm por Zec



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.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos Propiedades Basicas Javascript: Efectos 08 Propiedades Basicas Javascript: Efectos Yyyghjy Propiedades Basicas Javascript: Efectos Mschool

TOMO RECURSOS DE...
Propiedades Basicas Javascript: Efectos Recursos-1

RESEÑAS...


Propiedades Basicas Javascript: Efectos

Ir abajo

Propiedades Basicas Javascript: Efectos Empty Propiedades Basicas Javascript: Efectos

Mensaje por Sakura92 Sáb Abr 06, 2013 7:12 pm

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:
EfectoSintá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);
Donde dice duración debemos colocar la cantidad de milisegundos durante las cuales la animación estará activa; por ejemplo $('#cajita').slideDown(5000); hará que la animación de slideDown de #cajita dure 5 segundos.
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:
EfectoSintá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);
¿Quieres un ejemplo práctico? Mira aquí.

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:
$('.cajita').removeClass('cajita').addClass('shalala');
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.
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:
$('.cajita').toggleClass('shalala');
Además, en ambos casos podemos colocar varias clases separándolas con comas:
$('.cajita').toggleClass('shalala, cajita');
B. Modificar propiedades CSS
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:
.css('propiedad', 'valor');
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:
$('#cajita').css('width', '300px');
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.


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
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 408842
Reputación : 2
Edad : 31

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.