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;“的元素不起作用。

从文档中

注意：与速记动画方法（如.slideDown（）和 .fadeIn（）、. animate（）方法不会使隐藏元素可见作为效果的一部分。例如，给定$（“ someElement” ）.hide（）。animate（{height：“ 20px”}，500），动画将运行，但是该元素将保持隐藏状态。

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

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

为什么此jQuery.animate（）函数不会更改可见性？

1 个答案: