JQuery Diferencia entre hide() y fadeOut() , show() y fadeIn()

Si hallas algún fallo con tu código o proyecto, recuerda probar siempre en un entorno de testing antes añadir el código al proyecto final.

Solución:

• .fadeIn(duration) y .fadeOut(duration) animar la opacidad en una duración. Durante la animación de desvanecimiento el lugar del elemento está completamente ocupado sin embargo al final de .fadeOut() el lugar será eliminado de una vez.

• .show(duration) y .hide(duration) animar el tamaño del elemento (también la opacidad) al 100% y 0% y el lugar de los elementos también está animado en esa duración.

• Semejanza: El elemento desaparecería inmediatamente en ambos .hide() y
  .fadeOut() cuando la duración = 0 y aparecería inmediatamente en .show() y .fadeIn() cuando duración=0.

Ejecute este fragmento para verificar la diferencia y las similitudes:

$(document).ready(function()
  $("#fadeOut1000").click(function()
    $("#rectangle").stop().fadeOut(1000);
  )
  
  $("#fadeOut0").click(function()
    $("#rectangle").stop().fadeOut(0);
  )
  
  $("#hide1000").click(function()
    $("#rectangle").stop().hide(1000);
  )
  
  $("#hide0").click(function()
    $("#rectangle").stop().hide(0);
  )   
  
  $("#fadeIn1000").click(function()
    $("#rectangle").stop().fadeIn(1000);
  )
  
  $("#fadeIn0").click(function()
    $("#rectangle").stop().fadeIn(0);
  )
  
  $("#show1000").click(function()
    $("#rectangle").stop().show(1000);
  )
  
  $("#show0").click(function()
    $("#rectangle").stop().show(0);
  )     

)

#placeholder
    width:300px;
    height:100px;
    border:0px solid #666666;
    margin:auto;
    margin-top:10px;
    
#rectangle
    width:300px;
    height:100px;
    background:#ff0000;
    
a
    display:inline-block;
    margin:5px;
    border-radius:5px;
    border:1px solid #aaaaaa;
    padding:5px;
    cursor:pointer;
    width:90px;
    font-size:9pt;
    font-family:tahoma;
   

  fadeOut(1000)
  fadeOut(0)
  hide(1000)
  hide(0)
  

  fadeIn(1000)
  fadeIn(0)
  show(1000)
  show(0)
  
  

    

  

Tanto show(), fadeIn() y hide(), fadeOut() funcionan de manera similar.

La siguiente tabla muestra la diferencia entre ellos sobre la base de la propiedad css.

                     | Opacity | Display | Width/Height |

Para mostrar(), ocultar()

                     |Changes  |Changes  |Changes       |

Para fundido de entrada (), fundido de salida ()

                     |Changes  |Changes  |Doesn't change|

Aquí hay un código de demostración que puede verificar para una mejor comprensión:

HTML

    
    
    
    


    
Hey
    Click me!
    

    


    

TEXTO (miscript.js)

$(document).ready(function () 
    $('button').click(function () 
        $("#div1").show(10000);
        $("#div2").fadeIn(10000);
    );
);

No se te olvide dar visibilidad a este post si te fue de ayuda.

---

---

Utiliza Nuestro Buscador