| # | Descripción | Código jQuery | Funcionamiento |
|---|---|---|---|
| 1 | Mostrar elemento con .show() | $('#demo-1').show(); |
|
| 2 | Ocultar elemento con .hide() | $('#demo-2').hide(); |
|
|
Este elemento se ocultará al dar clic en el boton
|
|||
| 3 | Alternar visibilidad con .toggle() | $('#demo-3').toggle('slow'); |
|
| 4 | Desvanecer entrada con .fadeIn() | $('#demo-4').fadeIn(2000); |
|
| 5 | Desvanecer salida con .fadeOut() | $('#demo-5').fadeOut(2000); |
|
|
Se desvanecerá suavemente
|
|||
| 6 | Cambiar texto con .text() | $('#demo-6').text('¡Texto cambiado!'); |
|
|
Haz clic para cambiar este texto
|
|||
| 7 | Animar posición con .animate() | $('#demo-7').animate({left:'100px'}); |
|
|
Se moverá a la derecha
|
|||
| 8 | Escalar con .css() transform | $('#demo-8').css('transform','scale(1.3)'); |
|
|
Se agrandará 30%
|
|||
| 9 | Cambiar color de fondo con .css() | $('#demo-9').css('backgroundColor','#FF6B9D'); |
|
|
Cambiará de color
|
|||
| 10 | Agregar clases con .addClass() | $('#demo-10').addClass('clase-activa'); |
|
|
Agregará una clase dinámicamente
|
|||
| 11 | Deslizar hacia arriba con .slideUp() | $('#demo-11').slideUp(1500); |
|
|
Deslizará hacia arriba
|
|||
| 12 | Deslizar hacia abajo con .slideDown() | $('#demo-12').slideDown(1500); |
|
| 13 | Retrasar con .delay() | $('#demo-13').delay(1000).fadeIn(); |
|
| 14 | Manipular atributos con .attr() | $('#demo-14').attr('title','¡Nuevo atributo!'); |
|
|
Pasa el mouse para ver el atributo title
|
|||
| 15 | Agregar contenido con .append() | $('#demo-15').append('<br>Contenido agregado!'); |
|
|
Se agregará contenido dinámicamente
|
|||