jquery - 使用 CSS 和 Jquery 平滑过渡
问题描述
我正在使用 jQueryheader
根据滚动位置更改固定标题上元素的大小。我已经让我的代码按照我的意愿进行更改,但是更改是突然的而不是平滑的。我意识到我需要transition
在 CSS 中使用该属性,但无法弄清楚在哪里或如何做。一点帮助将不胜感激。
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('.bg').addClass('show')
$('#headerTitle').css("font-size", "1.5em");
} else {
$('.bg').removeClass('show')
$('#headerTitle').css('font-size', "2em")
};
});
$('.scroll').on('click', function(e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
.transition {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.show {
background-color: #000;
width: 100%;
height: 8.5em;
opacity: 0.8;
}
#headerTitle {
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="bg transition">
<p style="width: 60%; margin-left: 20%; border-bottom: 1px solid #FFF; padding-bottom: 1em;">
<span id="headerTitle">Joe Blow</span>
</p>
</header>
解决方案
您需要transition
在标题样式中包含属性:
#headerTitle {
font-size: 2em;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
推荐阅读
- flutter - Flutter FCM 工作一段时间然后停止工作
- html - 如何在不使用 jinja {{form}} 模板的情况下将数据从任何自定义 HTML 表单发送到 Django 模型表单
- azure-log-analytics - 在 Azure 中,想要将 Windows 虚拟机的日志发送到 2 个不同的 Logs Workspace
- php - Laravel:auth()->user() 手动登录后返回 null
- php - PHP header('Location:../page.php') 重定向在主机上不起作用
- c# - C#如何从外部捕获重新抛出异常
- linux - 比较用户输入的字符 x86_64 程序集
- java - 对象池使用 BaseKeyedPooledObjectFactory 问题
- ios - 上传使用 UIImagePickerController 选择的视频时遇到问题
- c# - Unity Mirror,客户端未执行损坏命令