.show() 无法正常工作（没有动画，没有更多代码）答案

【问题标题】：.show() not working properly (no animation, no further code).show() 无法正常工作（没有动画，没有更多代码）
【发布时间】：2019-11-08 05:17:10
【问题描述】：

我希望在网站加载后立即显示顶部横幅。我使用 JQuery 来完成这项任务，但 show() 函数没有按预期工作。

$(document).ready(function() {
  $('#job').show(2000, function() {
    $('#cross').click(function() {
      $('#job').hide();
    });
  });
});

.job-banner {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #333;
  display: none;
}

.job-banner:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job" class="job-banner">
  <p>...</p>
</div>

但这只是在没有任何动画的情况下立即显示 div，并且应该在动画之后执行的代码也不能正常工作。我试图在应该在 .show() 之后执行的代码块中放置一个警报，但没有。

还有其他方法可以实现还是我做错了什么？

【问题讨论】：

因为 show/hide 不仅会改变显示属性，还会改变不透明度。因此，您也必须将其设置为 0。
我将您的代码添加到一个可执行的 sn-p 中，它似乎可以正常工作。我建议这个问题是由页面中影响元素的其他一些 CSS 引起的。尝试使用 DOM 检查器查看应用了哪些样式。
@MauriceNino 并非如此
没错，但它会自动执行。您无需更改 CSS 即可处理它。
更好地使用过渡。因为 jQuery 在 iOS 设备上会导致滞后。（它使用 javascript 超时 + 循环来改变样式）

标签： javascript jquery css sass

【解决方案1】：

@Sergej 谢谢，成功了。我只需要声明不透明度，现在我有一个由 JQuery 调用的 css 转换。

所以对于 CSS：

job-banner {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: #333;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

.visible {
    visibility: visible;
    opacity: 1;
}

还有 JS：

$(document).ready(function() {
    $('#job').addClass('visible');
});

【讨论】：

可见性没有过渡，因此您可以将其从过渡属性中删除。只保留不透明度。