javascript - 为什么这个 jQuery.animate() 函数没有改变可见性？

Question

因此，在我的网站中，我希望在页面加载后的某个时间出现一个 div(其中包含一个图像)。我最初将其可见性设置为隐藏，在我的 javascript 文档中，我的网站等待一秒钟，然后将其可见性设置为“可见”。

但是如果我打开页面，图像根本不会显示。当它是一个简单的可见性变化(没有动画功能)时，图像会正确弹出。我的实现可能有什么问题？

<div id="scroll" style="position: fixed; bottom: 5%; left: 50%;
 transform: translateX(-50%); visibility: hidden;">
    <img src="images/insta.png" style="width: 10%;
    height: 10%; display: block; margin: auto;">
</div>

js(使用 jQuery):

$(document).ready(function() {
    setTimeout(function() {
        $("#scroll").animate({ visibility: "visible" }, "slow");
    }, 1000);
});

Answer 1

jQuery.animate 不显示隐藏元素，并且不适用于具有“visibility: hidden;”的元素

来自文档

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

解决方案，如果你需要使用visibility: hidden; 是将图像的opacity设置为0，然后将不透明度设置为动画1 同时将 visibility 设置为 visible。

$("#scroll").css({ visibility: 'visible' }).animate({
      opacity: 1,
});