jQuery的常用效果总结

最近在工作中深刻的体会到了jQuery以及JS的重要性，所以就写博客记录一下，方便自己以后查看，也希望帮助到有需要的童鞋，新手勿喷，欢迎指导（内容摘自w3school,需要查看原文的童鞋可以自行搜索）！

jQuery效果

1.隐藏和显示

hide()隐藏元素

show() 显示元素

toggle() 显示隐藏的元素，隐藏显示的元素

2.淡入淡出

​ fadeIn()淡入已隐藏的函数

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

​ fadeOut()方法淡出可见的元素

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

​ fadeToggle()可以再fadeIn()和fadeOut()方法之间进行切换。

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

​ fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

3.jQuery 滑动方法

jQuery 拥有以下滑动方法（具体语法同上，可以有speed和callback）：

slideDown() 向下滑动元素

slideUp() 向上滑动元素

slideToggle() 可以再slideDown ()和slideUp之间切换。

4.jQuery 动画 - animate() 方法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

5.jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

6.chaining

名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

例子 1

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);