show y hide en Jquery - Jquery

Autor YouCode - http://www.youcode.com.ar/jquery/show-y-hide-en-jquery-265

Fecha 12/04/2014

jQuery show() y hide(), que se usan para mostrar y ocultar elementos de nuestra web, mayoriatariamente divs, ids, clases, imágenes, elementos de formularios

Sintaxis:

$(selector).hide(duration,callback);
 
$(selector).show(duration,callback);
 
$(selector).show(duration [,easing] [,callback]);
 
$(selector).hide(duration [,easing] [,callback]);

selector: Es el elemento que queremos mostrar u ocultar:

- Si es un id –> $(#nombre del id)
- Si es una clase –> $(.nombre de la clase)
- Si es etiqueta/elemento –> $(nombre del elemento)

duration (opcional): Velocidad de la animación en milisegundos. También se puede usar los valores “slow” y “fast”.
easing (opcional): Se trata del tipo de animación a ejecutar. Las 2 posibilidades son: “linear” y “swing“. Linear sería una animación constante y swing una amimación con cambios de ritmo.
callback (opcional): Función a ejecutarse una vez finalizada la animación.

Opciones de parametros:

$(selector).show(opciones);
 
$(selector).hide(opciones);

duration: Tal y como comenté en la sintaxis, es la velocidad en milisegundos de la animación.
easing: Tal y como comenté en la sintaxis, función que se ejecuta durante la animación.
complete: Función que se ejecuta cuando termina la animación.
done: Función que se ejecuta cuando termina correctamente (sin errores) la animación.
fail: Función que se ejecuta cuando no se ejecuta correctamente (con errores) la animación.
always: Función que se ejecuta cuando termina la animación, bien sea con errores, sin ellos o cuando se para sin ser completada.

IMPORTANTE:
Es importante tener en cuenta que estos 2 métodos solo actual sobre un elemento, el primero que se encuantran. Es decir, si yo tengo 2 imagenes con el mismo id, actuarán sobre la imagen que esté antes en el código fuente.

EJEMPLO SIMPLE:

<script type="text/javascript">
    $(document).ready(function(){
        $("#mostrar").click(function(){
            $('#target').show(); //muestro mediante id
            $('.target').show(); //muestro mediante clase
         });
        $("#ocultar").click(function(){
            $('#target').hide(); //oculto mediante id
            $('.target').hide(); //muestro mediante clase
        });
    });
</script>

EJEMPLO CON DURACION Y VELOCIDAD DE LA ANIMACION:

<script type="text/javascript">
    $(document).ready(function(){
        $("#mostrar").click(function(){
            $('#target').show(3000);
            $('.target').show("slow");
         });
        $("#ocultar").click(function(){
            $('#target').hide(3000);
            $('.target').hide("fast");
         });
    });
</script>

EJEMPLO CON CALLBACK:

<script type="text/javascript">
$(document).ready(function(){
    $("#mostrar").click(function(){
        $('.target').show(3000,function() {
                alert ('imagen mostrada!');
        });
     });
    $("#ocultar").click(function(){
        $('.target').hide(3000,function() {
                alert ('imagen ocultada!');
        });
    });
});
</script>

El CallBack lo que haces es que al finalizar la animacion u ocultacion, lanza otra funcion u ALERT, es util cuando luedo de ocultar o mostrar algo queremos hacer algo mas.

EJEMPLO CON EASING

<script type="text/javascript">
    $(document).ready(function(){
        $("#mostrar").click(function(){
            $('.target').show("swing");
         });
        $("#ocultar").click(function(){
            $('.target').hide("linear");
        });
    });
</script>

http://www.youcode.com.ar/jquery/show-y-hide-en-jquery-265