基于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 相关文章推荐
php析构函数的具体用法小结
Mar 11 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
Position属性之relative用法
Dec 14 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
小程序实现图片预览裁剪插件
Nov 22 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使用crypt()函数进行加密
2017/06/08 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
jquery实现心算练习代码
2010/12/06 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python如何实现内容写在图片上
2018/03/23 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
用python计算文件的MD5值
2020/12/23 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
2014年情人节活动方案
2014/02/16 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
服务宗旨标语
2014/07/01 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
思想品德评语大全
2014/12/31 职场文书
小学运动会前导词
2015/07/20 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Go获取两个时区的时间差
2022/04/20 Golang