jQuery制作动态酷效果总结

jQuery是一个优秀的JavaScript框架，可以很好的解决不同浏览器兼容的问题，尤其是在ASP.NET MVC下，它的作用更加的凸显。

jQuery在制作动态酷效果的时候有很强的优势，以下是笔者总结的一些最常用到的方法。
 

1.修改内联CSS

<script type="text/javascript"><!-- google_ad_client = "pub-6770445892601887"; /* 468x60, 创建于 09-11-19 */ google_ad_slot = "4437639877"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

jQyery提供.css()方法来供我们获取或修改内联的css

.css()方法能够接收的参数由两种，一种是为它单独传递一个单独的样式属性和值，另一种是为它传递一个由“属性-值”对构成的映射：

.css('property','value');

.css({'property1':'value1','property-2':'value2'});

一般来说，数字值不需要加引号，而字符串值需要加引号。但是，当使用映射表示法时，如果属性名使用驼峰大小写形式的DOM表示法，则可以省略引号。

 

2.基本的隐藏和显示，不带动画效果

 

.hide()

.show()

这两个方法的作用就是立即隐藏或显示匹配的元素集合。

 

3.指定显示速度的隐藏和显示

 

在.hide()和.show()方法的基础上，可以制定隐藏或显示的速度。它的表示方法为：.hide('speed')或.show('speed')。speed的值可以为：

• slow、normal、fast；slow为0.6秒；normal为0.4秒；fast为0.2秒
• 数值表示的毫秒数值
  
  

 

4.淡入淡出效果

 

.fadein() 为匹配元素指定淡入效果

.fadeout() 为匹配元素指定淡出效果

使用.fadein()或.fadeout()同样可以制定speed值，如：slow、normal、fast、毫秒数

淡入淡出的实现方式其实是增加或减少匹配元素的不透明度来实现的。

 

5.制作动画效果

 

jQuery提供了一个强大的.animate()方法，通过该方法可以创建包含多重效果的自定义动画。.animate()方法接受以下四个参数：

• 一个包含样式属性及值的映射。
• 可选的速度参数，默认为normal。
• 可选的缓动类型
• 可选的回调参数。

 
6.使用.animate()制作动画的时候应当考虑的问题

• css对我们要改变的元素所施加的限制
  
  

例如，在元素的css定位没有设置成relative或absolute的情况下，调整left属性对于匹配的元素毫无作用。所有块级元素默认的css定位属性都是static，这个值精切地表明：在改变元素的定位属性之前试图移动它们，它们只会保持静止不动。

• 并发与排队效果
  
  

jQuery中无论是处理一组还是多组元素，默认都是同时发生的，因此，并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点：

如果是处理一组元素，可以根据代码的书序进行控制；

如果是处理多组元素，则可以通过回调函数进行控制；