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




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






Como posicionar mi página web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: WebSite Marketing SEO Noticias Tutorial

¿Cómo usar una impresora láser A3?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: hardware Noticias Tutorial

Como hacer algoritmo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: Lenguajes De Programacion Algoritmos 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