Hide a div with opacity animate function

Question

I am trying to hide a div with opacity animate function. Basically, I want the div to be hidden on click. But I want it to fadeout. Below is the code I have for it. can anyone help?

$("#div1").click(function() {
  $(this).animate({ opacity: "0" }, 1000);
  $("div").hide();
});

also, is it better to use fadeOut function instead of animate opacity?

Answer 1

fadeOut() is simpler because it will hide it for you automatically when it is done so you can save that code and it automatically waits for the animation to be done before hiding the element (something your current code was not doing).

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

Answer 2

Try this JSFIDDLE

$("#div1").click(function() {
    $(this).animate({ opacity: "0" }, 1000, function(){
        $(this).hide();
    });

});

Also you can use .fadeout(1000) . to get same behavior.

Answer 3

You can use .fadeOut() API for this,

$("#div1").click(function() {

   $(this).fadOut(1000);

});