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"});

Solution 1

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"});
});

Solution 2

$(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.