基于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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP静态成员变量
2017/02/14 PHP
jQuery拖动图片删除示例
2013/05/10 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
售后服务承诺书模板
2014/05/21 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
校车司机安全责任书
2015/05/11 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis