我想要一个顶部横幅,以便在网站加载后立即缓和。我使用 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() 之后执行的代码块中放置一个警报,但什么也没有。
是否有其他方法可以实现,还是我做错了什么?
最佳答案
@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');
});
关于javascript - .show() 无法正常工作(没有动画,没有更多代码),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56769769/