基于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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
Javascript进制转换实例分析
May 14 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
angularjs请求数据的方法示例
Aug 06 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
使用数据库保存session的方法
2006/10/09 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
js简单抽奖代码
2015/01/16 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
小学生新学期寄语
2014/01/19 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
党员民主评议个人总结
2014/10/20 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
领导欢迎词范文
2015/01/26 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年司法局工作总结
2015/05/22 职场文书
贷款收入证明范本
2015/06/12 职场文书
幼儿园保育员随笔
2015/08/14 职场文书