javascript - .show() 无法正常工作(没有动画，没有更多代码)

Question

我想要一个顶部横幅，以便在网站加载后立即缓和。我使用 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() 之后执行的代码块中放置一个警报，但什么也没有。

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

Answer 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');
});