添加过渡到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

要使一个元素的所有可动画属性长15秒，你可以这样做:

#element {
    transition: 1s;
}

也有其他选项，如缓冲功能和选择特定的属性来动画:https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

CSS过渡是一种方法。这样，您就可以在JavaScript中删除和添加类来触发它们。

这里是你的一些css过渡，虽然我留了一些给你完成=D

.maindiv {
    ...
    transition: all 0.5s ease;
}
.maindiv.collapsed {
    height: 50px;
}

JS

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