使用javascript隐藏然后禁用div

Question

我想隐藏div，通过动画将其不透明度更改为0，并在禁用时将显示属性更改为'none'。这两个函数都应该由onclick或至少一个单独的操作启动，因此div变得不可见(就像淡出一样(，然后消失。

---

我用这个代码来执行动画：

function animateStyle(divID) {
    $("#" + divID).css({ "opacity": "1" }).animate({ "opacity": "0" }, 900);
};
<span onclick="return animateStyle('alert-background');" 
class="close">&#10008;</span>

我尝试使用.hide来禁用div，但无法使两者协同工作——如果动画有效，那么div不会消失，而是保持不可见。如果div消失，那么动画就不起作用。这个想法可能有更好的解决方案吗？

---

更新：我已经找到了做我想做的事的方法，但这更多的是一个技巧，而不是解决方案：

function animateStyle(divID) {
    $("#" + divID).css({ "opacity": "1" })
                  .animate({ "opacity": "0" }, 900)
                  .delay(1100)
                  .css({ "margin-top": "0" })
                  .animate({ "margin-top": "-100000px" }, 1);
};

但是，尽管这是正确的，我想完全删除div，而不是将其移动到屏幕之外。希望有办法做到这一点…

Answer 1

您可以使用fadeOut:

$("#" + divID).fadeOut(900);

它应该是以下内容的简写，更接近于您已经拥有的内容：

$("#" + divID).css({ "opacity": "1" }).animate({ "opacity": "0" }, {
    duration: 900,
    complete: function() { $(this).hide(); }
});