使用 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(); }
});