基于jquery animate操作css样式属性小结


Posted in Javascript onNovember 27, 2015

昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的。不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等。

css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性:

* backgroundPosition
  * borderWidth
  * borderBottomWidth
  * borderLeftWidth
  * borderRightWidth
  * borderTopWidth
  * borderSpacing
  * margin
  * marginBottom
  * marginLeft
  * marginRight
  * marginTop
  * outlineWidth
  * padding
  * paddingBottom
  * paddingLeft
  * paddingRight
  * paddingTop
  * height
  * width
  * maxHeight
  * maxWidth
  * minHeight
  * maxWidth
  * font
  * fontSize(在animate函数的css参数指定并不同于标准css属性,例如这个css标准是:font-size。同理上面很多也是这样的情况)
  * bottom
  * left
  * right
  * top
  * letterSpacing
  * wordSpacing
  * lineHeight
  * textIndent
  * opacity

记住这些可以玩动画的哦~~

jquery的animate()方法也可设置非css属性

如题,举例:

$('body').animate({scrollTop:0}, 1500);
$("body").animate({scrollTop:"-="+50},350);

还有其他的几个小例子:

禁用元素:

$('button').attr('disabled', 'disabled'); 
$('button').removeAttr('disabled');

遍历元素集合:

$("input:text").each(function(index){ 
  alert(index);//循环的下标值,从0开始 
  alert(this.value);//自带属性可以用this(Dom)直接取值 
  alert($(this).attr("type"));//自定义属性需要用attr()取值 
});
Javascript 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jQuery拖动图片删除示例
May 10 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
将查询条件的input、select清空
Jan 14 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
谈谈jQuery Ajax用法详解
Nov 27 #Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 #Javascript
基于jquery实现全屏滚动效果
Nov 26 #Javascript
javascript给span标签赋值的方法
Nov 26 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
layui table 参数设置方法
2018/08/14 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python计算二维矩形IOU实例
2020/01/18 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
is_file和file_exists效率比较
2021/03/14 PHP
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
主持人演讲稿范文
2013/12/28 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
创意活动策划书
2014/01/15 职场文书
打架检讨书范文
2015/01/27 职场文书
预备党员个人总结
2015/02/14 职场文书
房产证明范本
2015/06/19 职场文书
redis限流的实际应用
2021/04/24 Redis
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis