Using jQuery .hide() with fading

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

There are also fadeIn and fadeToggle.

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/

I have tried the code in the below link, Its working fine.

Using jQuery .hide() and .show() with fading - Live Demo

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

You can also find fadeIn,fadeOut,slideUp and slideDown Using Jquery from thebelow link.

fadeIn fadeOut and slideUp slideDown Effects Using Jquery

Try using fadeout with duration instead of using hide.

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

Working Fiddle