时间戳

首页 > 解决方案 > .show() 无法正常工作（没有动画，没有更多代码）

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

问题描述

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

是否有另一种方法可以实现这一目标，或者我做错了什么？

标签： javascriptjquerycsssass

解决方案

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

推荐阅读