Using jQuery .hide() with fading

jquery hide fade
Francesca picture Francesca · Apr 23, 2013 · Viewed 70.4k times · Source

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

Arnelle Balane picture Arnelle Balane · Apr 23, 2013 
$("div").click(function () {
  $(this).fadeOut(1000);
})

There are also fadeIn and fadeToggle.

Related questions

Simple fade in fade out div with jquery on click

THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference. HTML: <div><a href="#" id="btn">Show bank div and hide fancy div</a></…

Read More
Use jQuery to hide a DIV when the user clicks outside of it

I am using this code: $('body').click(function() { $('.form_wrapper').hide(); }); $('.form_wrapper').click(function(event){ event.stopPropagation(); }); And this HTML: <div class="form_wrapper"> <a class="agree" href="javascript:;">I Agree</a&…

Read More
Hide/Show Column in an HTML Table

I have an HTML table with several columns and I need to implement a column chooser using jquery. When a user clicks on a checkbox I want to hide/show the corresponding column in the table. I would like to …

Read More