使用 jQuery 动画隐藏页面元素而不导致显示：none;

Question

我正在使用 Uploadify 插件将文件上传到我的服务器，我希望上传表单在上传初始化后淡出，进度条淡入。唯一的问题是，当上传表单获得

display: none;

属性时，Uploadify 停止工作，所有 jQuery 淡入淡出效果似乎都会在持续时间结束后导致。

我尝试这样做：

$('#upload-form').css('opacity', 0);

有效。表单隐藏后继续上传，但没有淡入淡出效果

有什么解决办法吗？谢谢！

Answer 1

这可能是一个解决方法：

$('#upload-form').fadeTo(1000, 0.01, function() {
    $(this).css('opacity', 0);
});

Answer 2

您可以使用jQuery.animate:

$('#upload-form').animate({
    opacity: 0
}, 'slow');

Answer 3

所以现在到了 2024 年，您只需使用 CSS 就可以轻松做到这一点

对于一个简单的更改来说，甚至不需要 jQuery 动画或淡入淡出功能，并且它将避免 jQuery 结束 hide() 动画时出现的问题：display: none 等。只需使用 CSS 属性transition-duration，如：

.fade-to-visible { 过渡持续时间：1s;不透明度：1； } .fade-to-invisible { 过渡持续时间：2s；不透明度：0； }

在此示例中，设置淡出至不可见类将在 2 秒内淡出，然后删除该类并将其设置为淡入可见将在 1 秒内淡出。

如果您为任何属性设置 CSS，只要设置了起始值，它就会在过渡持续时间的长度内进行动画处理（无法从无过渡到有内容，必须首先将其设置为起始属性，通常是 0 或 100，然后用其他东西设置一个类）。因此，在这种情况下，“不透明度”转换在所有现代浏览器中本地实现了“淡入淡出”效果，无需任何第三方插件，尽管使用 jQuery 来设置或删除类仍然可能是最快/最方便的方法，而不是普通的 js .