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.