javascript - 添加过渡到 jQuery 样式更改

Question

首先，我应该问一下是否可以为此添加过渡效果，使其看起来更平滑，而不是那么“滞后”。

这是我想添加过渡的脚本，它只会在您向下或向上滚动时更改某些元素的样式:

$(window).scroll(function(event){
    div.css("height", "50px");
    pic.css({ width : "400px", height : "50px" });
    text.hide();
    menu.css("top", "0px");
});

在这里查看我的全部代码:JSFiddle .

Answer 1

您可以将 CSS 属性 transition 添加到元素。

要实现 1 秒长的平滑过渡，您可以对元素的所有可动画属性执行以下操作:

#element {
    transition: 1s;
}

还有其他选项，例如缓动函数和选择特定属性来设置动画: https://developer.mozilla.org/en-US/docs/Web/CSS/transition