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

昨天突然有网友问我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()取值
});
赞 (0)

相关推荐

  • jQuery 中关于CSS操作部分使用说明

    刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴. 其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此 复制代码 代码如下: jQuery.className.has的定义可以改进成:      has: function( t, c ) {        t = t.className || t;     

  • jQuery操作元素css样式的三种方法

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

  • JQuery操作元素的css样式

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"

  • jQuery使用手册之三 CSS操作

    jQuery使用手册之三 CSS操作

    传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(&

  • jQuery学习笔记 操作jQuery对象 CSS处理

    CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,-,nameN:valueN}) 设置元素上CSS规则name属性的值为value,也可使用函数参数,不解释:还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值.这

  • JQuery中操作Css样式的方法

    复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • jQuery操作css样式

    jQuery操作css样式

    css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: html代码 jQuery代码 效果如下: css操作之尺寸操作 css代码 html代码 jQuery代码 效果如下 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

  • jquery 操作css样式、位置、尺寸方法汇总

    一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

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

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jQuery中的CSS样式属性css()及width()系列大全

    jQuery中的CSS样式属性css()及width()系列大全

    目录 1.css()基本使用: 1.1 获取css属性 1.2 设置css属性 2.width()系列基本使用(height()系列同理) 2.1 width() 2.2 innerWidth()与outerWidth() 3.offset()与position() 3.1 取值对比 3.2 设置值对比 4.scrollLeft()与scrollTop() 4.1 取值 4.2 设置值 4.3 小demo 1.css()基本使用: 1.1 获取css属性 1.1.1 获取单个属性值(传入字符串)

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • 基于jQuery选择器之表单对象属性筛选选择器的实例

    基于jQuery选择器之表单对象属性筛选选择器的实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" rel="external n

  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单. 基本用法 基础用法 <!--web开发中顶层变量的key名是:root,小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .

  • 基于jQuery ligerUI实现分页样式

    基于jQuery ligerUI实现分页样式

    在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来(通过ajax实现). ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 这里只实现基于ligerUI的分页 LigerUI的分页方式有两种:local和server. 如果数据量不是很大,就直接采用l

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

随机推荐