.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

@ Сергей. Спасибо, это помогло. Мне просто нужно было также объявить непрозрачность, и теперь вместо этого у меня есть переход 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');
});