CODEWITHSUNDEEP
javascriptjquery
kcrocks
kcrocks

Reputation: 21

Hide a div with opacity animate function

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?

Upvotes: 0

Views: 73

Answers (3)

jfriend00
jfriend00

Reputation: 708106

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

Upvotes: 1

Prasanth K C
Prasanth K C

Reputation: 7332

You can use .fadeOut() API for this,

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

   $(this).fadOut(1000);

});

Upvotes: 0

Anoop
Anoop

Reputation: 23208

Try this JSFIDDLE

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

});

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

Upvotes: 1

Related Questions