jquery fade out display:none

Question

Why doesn't my jQuery fade out work. If I replace Out with In and None with Inline it will fade in fine but it won't fade out. Any ideas?

$(this).find(".hover").fadeOut("slow").css({display:"none"});

score 9 · Accepted Answer · answered Mar 01 '11 at 20:35

9

The issue is the .css({ display : 'none' }), you don't need this code there since fadeOut will hide it once it's complete. Try using this code:

$(this).find(".hover").fadeOut("slow");

Or if you must have the hide... Try this code (fadeOut's 2nd parameter is a callback function that is ran AFTER fadeOut is complete)

$(this).find(".hover").fadeOut("slow", function () {
    $(this).css({display:"none"});
});

answered Mar 01 '11 at 20:35

McHerbie

2,945
17
20

1

That first one worked fine, I was thinking that but I thought it would remove the class from the page so it wouldnt add it again when I hover – pjiorwierjog Mar 01 '11 at 20:37

score 1 · Answer 2 · edited Mar 01 '11 at 20:43

1

$(document).ready(function(){
     $(".hover").fadeOut("slow", function(){
              alert("fadeout complete!!!");
     });
});

that should work havent tested though just coded it. Like McHerbie said when fadeOut is done the display property is set to none. I dont see why your using find either.

edited Mar 01 '11 at 20:43

gen_Eric

223,194
41
299
337

answered Mar 01 '11 at 20:39

Josh Bedo

3,410
3
21
33

The OP is using `find` to only get elements with the class 'hover' that are children of `this` (whatever `this` is). – gen_Eric Mar 01 '11 at 20:42
Exactly what Rocket said. I assume you were suggesting doing this: `$(".hover").fadeIn("slow")` but then if i had 2 or more on the page they would all fade in when I only want one to fade in – pjiorwierjog Mar 01 '11 at 20:49

jquery fade out display:none

2 Answers2