jQuery——样式与动画

摘要:
通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建更精致的动画。使用.css()的方式与使用.addClass()的方式相同——将它连缀到jQuery对象后面,这个jQuery对象包含一组DOM元素。####设置计算的样式属性值在需要多次使用某个jQuery对象时,最好也把这个对象保存到一个变量中,从而达到缓存数据的目的。如果传入的是其他字符串,jQuery就会在默认的400毫秒内完成效果。###创建自定义动画jQuery提供了一个强大的.animate()方法,用于创建控制更加精细的自定义动画。

通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建更精致的动画。


###修改内联CSS
jQuery提供了.css()方法。

这个方法集getter(获取方法)和setter(设置方法)于一身。为取得某个样式属性的值,可以为这个方法传递一个字符串形式的属性名,然后同样得到一个字符串形式的属性值。要取得多个样式属性的值,可以传入属性名的数组,得到的则是属性和值构成的对象。

对于backgroundColor这样由多个单词构成的属性名,jQuery既可以解释连字符版的CSS表示法(如background-color),也可以解释驼峰大小写形式的DOM表示法(如backgroundColor)。

//取得单个属性的值
.css('property')
//返回"value"
//取得多个属性的值
.css(['property1','property-2'])
//返回{"property1":"value1","property-2":"value2"}

设置样式属性时,.css方法能够接受的参数有两种,一种是为它传递一个单独的样式属性和值,另一种是为它传递一个由属性-值对构成的对象。

//单个属性及值
.css('property','value')
//属性-值对构成的对象
.css({
    property1:'value1',
    'property-2':'value2'
    })

这些键值的集合叫对象字面量,是在代码中直接创建的Javascript对象。

对象字面量
一般来说,数字值不需要加引号而字符串值需要加引号。由于属性名师字符串,所以属性通常是需要加引号的。但是,如果对象字面量中的属性名是有效的javascript标识符,比如使用驼峰大小写形式的DOM表示法时,则可以省略引号。

使用.css()的方式与使用.addClass()的方式相同——将它连缀到jQuery对象后面,这个jQuery对象包含一组DOM元素。

####设置计算的样式属性值

在需要多次使用某个jQuery对象时,最好也把这个对象保存到一个变量中,从而达到缓存数据的目的。

####带厂商前缀的样式属性
浏览器厂商在引入试验性的样式属性时,通常会在实现达到CSS规范要求之前,在属性名前面添加一个前缀。等到实现和规范都稳定之后,这些属性的前缀就会被去掉,让开发人员使用标准的名称。

css声明:

-webkit-property-name:value;
-moz-property-name:value;
-ms-property-name:value;
-o-property-name:value;
property-name:value;

###隐藏和显示元素
基本的.hide()和.show()方法不带任何参数。这两个方法的作用就是立即隐藏或显示匹配的元素集合,不带任何动画效果。

.hide()方法会将匹配的元素集合的内联属性设置为display:none。但它聪明之处是,能够在把display的值变成none之前,记住原先的display值,通常是block、inline或inline-block。

.show()方法会将匹配的元素集合的display属性,恢复为应用display:none之前的可见属性。


###效果和时长
当在.show()或.hide()中指定时长(一个速度)参数时,就会产生动画效果,即效果会在一个特定的时间段内发生。

####指定显示速度
对于jQuery提供的任何效果,都可以指定两种预设的速度参数:‘slow’和‘fast’。使用.show(‘slow’)会在600毫秒(0.6秒)内完成效果,而.show(‘fast’)则是200毫秒(0.2秒)。

如果传入的是其他字符串,jQuery就会在默认的400毫秒内完成效果。要指定精确的速度,可以使用毫秒数值。

####淡入和淡出
如果想在显示整个段落时,只是逐渐地增大其不透明度,可以使用.fadeIn(‘slow’)方法。

####滑上和滑下
使用jQuery的.slideDown()和.slideUp()方法仅改变元素的高度。

要让段落以垂直滑入的效果出现,可以使用:.slideDown('slow')

####切换可见性
jQuery提供了一个.toggle方法,该方法的作用类似于.show()和.hide()方法,而且与它们一样的是,.toggle()方法时长参数也是可选的。

另一个复合方法是.slodeToggle(),该方法通过逐渐增加或减少元素高度来显示或隐藏元素。


###创建自定义动画
jQuery提供了一个强大的.animate()方法,用于创建控制更加精细的自定义动画。.animate()方法有两种形式,第一种形式接收以下4个参数。

一个包含样式属性及值的对象:
可选的时长参数:既可以是预置的字符串,也可以是毫秒数值。
可选的缓动类型:
可选的回调函数:

4个参数放在一起:

.animate({property:'value1',property2:'value2'},
duration,easing,function(){
     alert('The animation is finished.');
     } );

第二种形式接受两个参数,一个属性对象和一个选项对象。

.animate({properties},{options})

###并发与排队效果
排队效果,即让效果一个接一个地发生。

####处理一组元素
当为同一组元素应用多重效果时,可以通过连缀这些效果轻易地实现排队。

####概括

(1)一组元素上的效果:
当在一个.animate()方法中以多个属性的方法应用时,是同时发生的。
当以方法连缀的形式应用时,是按顺序发生的(排队效果)——除非queue选项值为false。
(2)多组元素上的效果
默认情况下是同时发生的。
当在另一个效果方法或者在.queue()方法的回调函数中应用时,是按顺序发生的(排队效果)。

免责声明:文章转载自《jQuery——样式与动画》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android 多媒体视频播放一( 多媒体理解与经验分享)SpringCloud(七)MySQL跨实例访问下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jQuery插件获取URL参数(jQuery.query)

代码 例如 当前你的URL是:http://www.cssrain.cn/index.php?test=1&kk=2如果想获取test,则可以引入插件后,用如下方法获取:var test = $.query.get('test');如果参数有多个相同的名称 ,则可以这样:var arr = $.query.get('testy');输出: [ 值...

jqgrid 事件说明

Events(事件) 事件响应动作被设置为表格的属性,以下定义了行被选中时的响应: var lastSel; jQuery("#gridid").jqGrid({ ...    onSelectRow: function(id){       if(id && id!==lastSel){          jQuery('#gridid'...

jquery之json数据操作

今天在开发一个 异步更新 select下拉列表时,遇到了一些问题,现记录下,以备以后遇到时可以查阅。 首先是:出现 非法标签错误,其原因是,在 eval json数据的时候,左右没有加括号,正确的格式应该是:eval(“(“+jsondata+”)”); 其次是在访问json数据时,采用jsondata.length想来遍历数据,但是每次都是显示undef...

20 个非常棒的jQuery内容滑动插件

Wow SliderWOW Slider是一款小巧易用的网页滑块设计。该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果。他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑,是很不错的图像滑块设计工具。 Nivo Slider Nivo Slider是一款出色的jQuery幻灯片插件,支持多种切换效果,可定制性强. Simple...

JS jQuery查看系统中安装的字体

1.下载插件:FontDetect插件 地址:http://www.lalit.org/lab/javascript-css-font-detect/ 或者复制以下代码到fontdetect.js: var Detector = function() {// a font will be compared against all the three def...

jQuery 时间控件推荐

My97DatePicker  My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件。具有强大的日期范围限制功能;自定义事件和丰富的API库;多语言支持和自定义皮肤支持;跨无限级框架显示和自动选择显示位置。My97DatePicker    JS Calendar  JS Calendar是一个支持多种浏览器,多种语言的日...