使用Jquery进行CSS转换

Question

我想在我的网站中的元素中添加class(styky 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"？

谢谢！

Answer 1

问题可能出在css上。您需要定义转换所应用的特性名称，而不仅仅是持续时间。

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

例如，如果您希望在不透明度上进行转换，您可以执行以下操作：transition: opacity 10s

此外，你只能在两种状态之间转换(不能像显示等(

#masthead {
opacity: 0;
transition: opacity 10s;
}
// masthead with sticky-border
#masthead.sticky-border {
opacity: 1;
}