一款简洁而强大的前端框架JQUery，动画效果及剪刀石头布小游戏

Query是什么？

jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery效果-隐藏和显示

.show()让隐藏的元素显示。效果为：同时修改元素的高度、宽度、opacity属性

.hide()让显示的元素隐藏，与show相反

.toggle() 方法用来切换 hide() 和 show() 方法。 显示被隐藏的元素，并隐藏已显示的元素

一款简洁而强大的前端框架JQUery，动画效果及剪刀石头布小游戏

1 
2 
3 
4 
5 
6 
7 
17 
18 
19 
如果你点击“隐藏” 按钮，我将会消失。
20 隐藏
21 显示
22 
23 

JQuery效果-淡入淡出

.fadeIn() 让隐藏的元素淡入显示

.fadeOut() 让显示的元素淡出隐藏，修改透明度

. fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

.fadeTo(时间,最终透明度,函数)同fadeToggle，接受第二个参数，表示达到最终透明度

1 
2 
3 
4 
5 
6 
7 
16 
17 
18 
实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。
19 点击淡入/淡出
20 


21 

22 

23 

24 

25 

26 
27 

JQuery效果-滑动

.slideDown() 让隐藏的元素显示，效果为从上往下，增加高度；

.slideUp() 让显示的元素隐藏，效果为从下往上，减小高度；

. slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

1 
2 
3 
4 
5 
6 
7 
21 
28 
29 
30 
31 
点我，显示或隐藏面板。
32 
Hello world!
33 
34 

JQuery效果-animate()方法

.animate({最终样式属性，键值对对象},

动画事件,

动画效果("linear","swing"),

动画执行完后的回调函数)

自定义动画注意事项：

参数一的对象中，键必须使用驼峰法则

只有数值类型的属性能够使用动画，非数值类型的属性不能使用动画

1 
2 
3 
4 
5 
6 
7 
16 
17 
18 
19 开始动画
20 
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
21 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
22 
HELLO
23
24 
25 

如果有对前端感兴趣前端程序员，可以加入我们的web前端技术学习群哦189394454。会送前端的精品教程噢！