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.


  • 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!






Trading en Tacones – Mujeres empoderadas con las inversiones

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-05
  • Categorias: Forex Noticias Tutorial

Como agregar un icono de Font Awesome en CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web @font-face WebSite webmasters Noticias Tutorial

Iconos sociales para Datalife engine y para cualquier sitio Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web Redes Sociales WebSite webmasters Noticias Tutorial

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial