none - jquery remove class

Usando jQuery.hide() con desvanecimiento

Question

Tengo una función .hide() que oculta divs basados ​​en casillas de verificación.

JS Fiddle de esto trabajando aquí Ejemplo de sitio real aquí

Estoy tratando de darle animación para que .hide() desaparezca / desaparezca en lugar de simplemente desaparecer.

Se intentó utilizar la función jQuery Fade pero como un parámetro para .hide() pero no parece funcionar

$("div").click(function () {
      $(this).hide("fade", {}, 1000);
});

Intenté usar esto en mi código (ver JS Fiddle) como sigue:

if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").hide("fade", {}, 1000);
        }

¿A dónde me voy mal?

Answer 1

He intentado el código en el siguiente enlace, está funcionando bien.

Uso de jQuery .hide () y .show () con atenuación - Demo en vivo

 $("#btnHideShow").click(function () {
            if ($("#btnHideShow").val() == "Hide") {
                $("#imgHideShow").hide(1000);
                $("#btnHideShow").attr("value", "Show");
            }
            else {
                $("#imgHideShow").show(1000);
                $("#btnHideShow").attr("value", "Hide");
            }
        });

También puede encontrar fadeIn, fadeOut, slideUp y slideDown usando Jquery desde el siguiente enlace.

fadeIn fadeOut y slideUp slideDown Efectos usando Jquery

Answer 2

Intenta usar fadeout con duración en lugar de usar hide.

   if(allSelected.length > 0){
        $("div.prodGrid > div:not(" + allSelected + ")").fadeOut(1000);
    }

Violín de trabajo

Answer 3

Puede usar la solución de @ Arnelle si desea desvanecer o

Reemplace $(this).hide("fade", {}, 1000); con

     $(this).hide("slow");//or $(this).hide(1000);

Pasar "lento" te dará una buena animación antes de esconder tu div.

Modificó su violín con cambios: http://jsfiddle.net/Z9ZVk/8/

Answer 4

$("div").click(function () {
  $(this).fadeOut(1000);
})

También hay fadeIn y fadeToggle .