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 .