Using jQuery .hide() with fading

Question

I have a .hide() function that hides divs based on checkboxes.

JS Fiddle of it working here Real site example here

I'm trying to give it animation so that the .hide() will fade in/out rather than just disappear.

Tried utilising the jQuery Fade function but as a parameter for .hide() but doesn't seem to work

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

I tried using this in my code (see JS Fiddle) as the following:

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

Where am I going wrong?

Answer 1

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

There are also fadeIn and fadeToggle.

Answer 2

You might use @Arnelle's solution if you want to fadeOut or

replace $(this).hide("fade", {}, 1000); with

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

passing "slow" will give a nice animation before hiding your div.

Modified your fiddle with changes: http://jsfiddle.net/Z9ZVk/8/