Inicia sesión




Efectos jQuery - Ocultar y mostrar

Efectos jQuery - Ocultar y mostrarjQuery es una biblioteca de jаvascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de jаvascript más utilizada. Leer mas...

En este tutorial mostraremos la manera de ocultar y mostrar (Hide and Show jQuery Effects) con jQuery.

Para conseguir que el jQuery funcione tenemos que llamar a la biblioteca de jQuery en este ejemplo vamos a utilizar la biblioteca de Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Luego diseñaremos nuestro HTML a nuestro gusto en este ejemplo vamos a utilizar button = botón. Este elemento crea botones marcadores.
La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.
<button class="showHide1">Mostrar ocultar (regular .toggle)</button> 
<button class="showHide2">Mostrar ocultar (Con .slideToggle)</button>
<button class="showHide3">Mostrar ocultar (Con.fadeToggle)</button>
Y por ultimo agregaremos nuestro código de jQuery:
$(document).ready(function(){    
    $('.showHide2').click(function() {
        $('.hiddenDiv').slideToggle("slow");        
    });
    
    $('.showHide1').click(function() {
        $('.hiddenDiv').toggle();
    });        
    
    $('.showHide3').click(function() {
        $('.hiddenDiv').fadeToggle();
    });
});
Ver resultado.

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Efectos jQuery - Ocultar y mostrar
Efectos jQuery - Ocultar y mostrar Efectos jQuery - Ocultar y mostrar...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Agujeros De Seguridad En Android, Facebook, Windows, Office, Internet Explorer, Adobe...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Noticias Adobe Tutorial Facebook Windows Herramientas Ofimaticas

Como diseñar trayectorias del movimiento en PowerPoint

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Herramientas Ofimaticas PowerPoint Microsoft Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial