Question

我想隐藏div将其不透明度更改为0 with animation ，并在完成后禁用它将显示属性更改为'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(); }
});

隐藏然后使用javascript禁用div

1 个答案: