添加过渡到 jQuery 样式更改

Question

首先，我应该问一下是否可以为此添加过渡，使其看起来更平滑，而不是 "laggy"。

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

$(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

Answer 2

CSS 转换是一种方法。这样你就可以在 JavaScript 中删除并添加类来触发它们。

Here's your fiddle with some css transitions 虽然我留了一些给你完成 =D

.maindiv {
    ...
    transition: all 0.5s ease;
}

.maindiv.collapsed {
    height: 50px;
}

JS

if (st > lastScrollTop){
  div.addClass('collapsed');
  ...       
} else {
  div.removeClass('collapsed');
  ...
}

添加过渡到 jQuery 样式更改

Add transitions to jQuery style changes

html

javascript

css

jquery

css-transitions