使用Jquery进行CSS转换
使用Jquery进行CSS转换
提问于 2018-07-19 22:32:10
我想添加类(stycky-border)到我网站中的元素。下面是我的jQuery代码
`
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 20) {
$('#masthead').addClass('sticky-border');
}
else {
$('#masthead').removeClass('sticky-border');
}
});
});
`我怎样才能让这个动作变得缓慢，带着过渡。如何在jQuery中使用css属性"transition: 10s“？
谢谢!
回答 1
Stack Overflow用户
发布于 2018-07-20 07:02:04
看起来问题可能出在你的css上。您需要定义一个要应用转换的属性名称，而不仅仅是一个持续时间。
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
例如，如果您希望在不透明度上进行过渡，则可以这样做：transition: opacity 10s
此外，您只能在两个状态之间转换(不能像显示之类的东西)。使用opacity示例，您的代码可能如下所示：
#masthead {
opacity: 0;
transition: opacity 10s;
}
// masthead with sticky-border
#masthead.sticky-border {
opacity: 1;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51425334
复制相关文章
相似问题