隐藏具有不透明度动画功能的div

Question

我试图隐藏具有不透明度动画功能的div。基本上，我想在点击时隐藏div。但我希望它能够淡出。以下是我的代码。有人可以帮忙吗？

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

另外，使用fadeOut函数代替动画不透明度更好吗？

Answer 1

fadeOut()更简单，因为它会在完成后自动隐藏它，因此您可以保存该代码并自动等待动画在隐藏元素之前完成（当前代码没有做的事情） ）。

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

Answer 2

试试这个     JSFIDDLE

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

});

您也可以使用.fadeout(1000)。得到同样的行为。

Answer 3

您可以使用.fadeOut（）API，

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

   $(this).fadOut(1000);

});