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谢谢，做到了。我只需要声明不透明度，现在我有了一个CSS过渡，而JQuery调用了它。

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

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

1 个答案: