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

标签 javascript jquery html

因此,在我的网站中,我希望在页面加载后的某个时间出现一个 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);
});

最佳答案

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,
});

关于javascript - 为什么这个 jQuery.animate() 函数没有改变可见性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55841213/

相关文章:

javascript - 减慢旋转/交替文本

javascript - 需要转换JSON格式

javascript - 带有 Asp.NET 代码的 JQuery 消息

javascript - 在php中将html元素编码为JSON

javascript - 如何修复可点击的 href 标签?

javascript - 地理位置在 x 次尝试后挂起,在浏览器重新启动后有效

javascript - 我的应用无法多次向 Firebase 发送相同的数据结构

javascript - 单击时增加图像尺寸和高度

jquery - CSS 图像滚动贴图和 jQuery : how to use a second li list?

javascript - 使用 jquery .on() 方法作用于同一元素(选项标签)的两个脚本之间的冲突