添加过渡到jQuery样式更改
Add transitions to jQuery style changes
首先,我想问一下是否可以添加过渡,使其看起来更平滑,而不是"滞后"。
这是我想添加一个过渡的脚本,它只是改变一些元素的风格,当你向下或向上滚动:
$(window).scroll(function(event){
div.css("height", "50px");
pic.css({ width : "400px", height : "50px" });
text.hide();
menu.css("top", "0px");
});
查看我的完整代码:JSFiddle.
可以为元素添加CSS属性transition
要使一个元素的所有可动画属性长15秒,你可以这样做:
#element {
transition: 1s;
}
也有其他选项,如缓冲功能和选择特定的属性来动画:https://developer.mozilla.org/en-US/docs/Web/CSS/transition
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');
...
}
相关文章:
- jQuery/JavaScript在线公文包表单-打印样式表
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 通过jQuery添加ng样式属性,angular不更新
- 如何通过JQuery修改样式属性
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 使用 jQuery 获取样式属性值
- 如何使用jQuery切换样式表
- jQuery位置选择器输入样式背景和焦点
- 如何使用外部Javascript库(如jQuery)重命名Google闭包样式表
- 使用JQuery将现有CSS样式扩展%-%
- jQuery Mobile样式从另一个文件加载内容
- 使用jQuery按条件将样式设置为html标记
- 更改:活动伪类'使用jQuery的样式
- 无法通过内容脚本使用jQuery更改HTML元素的样式
- 使用jquery在react组件内部设置样式可以吗
- 使用javascript/jquery检查.css样式表的名称
- 带有jQuery ui主题的自动样式复选框
- 未使用jQuery验证器选中Css样式复选框时
- 在 jQuery 手风琴样式菜单中切换子项可见性
- 使用JQuery以不同的方式设置每个
- 样式