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?

The important thing to note here is that the `hide()` method does not take an effect argument at all. Read [the method's documentation](http://api.jquery.com/hide/) to see the different arguments. In such methods the first argument or argument property is usually the `duration` argument. — Boaz, Apr 23 '13 at 09:06

score 73 · Accepted Answer · answered Apr 23 '13 at 08:54

73

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

There are also fadeIn and fadeToggle.

answered Apr 23 '13 at 08:54

Arnelle Balane

5,437
1
26
32

this thumb up was for jquery – tObi Jun 30 '14 at 12:19
12

this technically doesn't answer the question, since show and hide work on display and the fade methods work on opacity. – neil1967 Jan 16 '15 at 21:56

codefreak · Answer 2 · 2013-04-23T09:03:33.103

24

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/

edited Apr 23 '13 at 09:03

answered Apr 23 '13 at 08:57

codefreak

6,950
3
42
51

2

Arnelle's answer fades out. Animation with hide and show is different than fading out... It's cooler than fading out and fading in – codefreak Apr 23 '13 at 09:02
This is really great, however it doesn't work when the filters are clicked in quick succession, quite typical with e-commerce. Think a simple fade might work better. This is great though! – Francesca Apr 23 '13 at 09:33
What a gem! Can't believe I never new this! – Henry Howeson May 14 '20 at 06:46

score 2 · Answer 3 · answered Apr 23 '13 at 08:59

2

Try using fadeout with duration instead of using hide.

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

Working Fiddle

answered Apr 23 '13 at 08:59

Milind Anantwar

81,290
25
94
125

score 1 · Answer 4 · answered Apr 28 '15 at 13:59

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

score 0 · Answer 5 · answered Aug 19 '20 at 11:30

The best approach to hide/Show the div with fading effect for smooth transition can be achieve by combination of CSS ,jQuery with adding and removing class.

$("#div1").addClass('fade in show').removeClass('in hidden');
$("#div2").removeClass('fade in show').addClass('in hidden');

.hidden {
    display: none;
}

.show {
    display: block;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

    .fade.in {
        opacity: 1;
    }

Using jQuery .hide() with fading

5 Answers5