jQuery03--jQuery特效

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 1.4k | 阅读时长 ≈ 5

jQuery特效学习笔记

jQuery特效

jQuery隐藏和显示

jQuery hide（）
该方法用于隐藏指定的HTML元素，语法结构为

1
$（selector）.hide（［duration，］［，callback］）；
  • duration：动画设置隐藏的持续时间，可以填入slow（600ms）、fast（200ms）或者具体的时间长度（毫秒单位）；
  • callback：隐藏动作后下一步需要的执行函数，若无可以不填
    使用不带任何参数的hide（）函数可以实现无动画效果的隐藏动作，相当于将选择器元素设置为display：none$（“p”）.hide（）。

jQuery show（）
该方法用于显示指定元素，语法结构为

1
$（selector）.show（［duration，］［，callback］）；

参数的意义同hide（）方法的参数。

jQuery toggle（）
该方法用于切换元素的隐藏和显示。该方法可以替代hide（）和show（）方法单独使用，用于显示已隐藏的元素，和隐藏正在显示的元素。
语法结构为$（selector）.toggle（）；
可以点击一个按钮循环实现隐藏和显示，如果显示状态就代表隐藏，如果隐藏状态就表示显示状态。

jQuery淡入淡出

fadeIn（）淡入

fadeIn（）实现元素的淡入效果，即将原先隐藏的元素显示出来，语法结构为

1
$（selector）.fadeIn（［duration，］［，callback］）；

fadeOut（）

该方法用于实现元素的淡出效果，即将原先存在的元素逐渐隐藏起来，语法结构为

1
$（selector）.fadeOut（［duration，］［，callback］）；

fadeIn（）和fadeOut（）不添加任何参数就是没有动画效果，立刻就完成动画过程。

fadeToggle（）

该方法用于切换元素的淡入和淡出效果，语法结构为

1
$（selector）.fadeToggle（［duration，］［，callback］）；

如果原先为淡出状态，按钮则代表淡入；如果原先为淡入状态，按钮就代表淡出，交替使用。

fadeTo（）

该方法用于指定渐变效果的透明度，透明度取值为0～1，语法结构如下：

1
$（selector）.fadeTo（duration，opacity［，callback］）；

其中opacity表示透明度，0为完全透明，1为非透明。

jQuery滑动

jQuery slideDown（）

该方法用于向下滑动元素，语法结构如下：$（selector）.slideDown（［duration，］［，callback］）；
该方法中的两个参数均为可选。其他参数的意义同上。

jQueryslideUp（）

该方法用于向上滑动元素，语法结构如下：$（selector）.slideUp（［duration，］［，callback］）；
参数意义同上。

jQuery slideToggle（）

该方法用于切换滑动方向，语法结构如下：$（selector）.slideToggle（［duration，］［，callback］）；
如果元素原先处于向上滑动，那么按下按钮代表向下滑动，如果元素原先是向下滑动状态，那么按下按钮代表向上滑动。

jQuery 动画

animate（）方法通过更改元素的CSS属性值实现动画效果。语法结构：（selector）.animate（{params}，［duration，］［，callback］）；
参数意义如下：

  • params：表示形成动画的C S S属性，允许同时实现多个属性的改变。
  • duration：表示规定的效果时长，默认单位为毫秒。
  • callback：表示动画完成后需要执行的函数名称，若无下一步需执行的函数，可省略不填。

改变元素的基本属性

animate（）方法可以用于实现绝大部分C S S属性的变化，例如元素的宽度、高度、透明度等的变化。但是jQuery和辛苦中并没有包含色彩变化效果，因此如果要实现颜色动画需要在jQuery官方网站上另外，下载色彩动画的相关插件。
当CSS属性名称中包含连字符“-”时，需要使用驼峰标记法。
animate（）方法可以用于各种HTML元素。
例如

1
2
3
4
5
6
$（“#btn”）.click（function（）{
$（“div”）.animate（{
width：“400px”，
fontSize：“300px”，
opacity：0.23}，2000）；
}）；

改变元素的位置

animate（）方法也可以通过使用CSS属性的left、right、top、bottom改变元素位置实现移动效果。由于这些属性值均为相对值，而在HTML中所有元素的position属性值均默认为静态（static）无法移动的，因此需要事先设置指定元素的position为relative、absolute或者fixed才能生效。
例如

1
2
3
4
5
$（“#btn”）.click（function（）{
$（“div”）.animate（{
left：“+=200”，
top：“+=100”}，2000）；
}）；

动画队列
可以为多个连续的animate（）方法创建动画队列，然后依次执行队列中的每一项动画，从而实现更加复杂的动画效果。在同一个animate（）方法中描述的多个动画效果会同时发生，但在不同的animate（）方法中描述的动画效果会按照动画队列冲的先后次序发生。

1
2
3
4
5
$（“#btn”）.click（function（）{
$（“div”）.animate（{left：“+=200”，top：“+=100”}，2000）；
$（“div”）.animate（{right：“+=200”，bottom：“+=100”}，2000）；
$（“div”）.animate（{left：“-=200”，top：“-=100”}，2000）；
}）；

单击按钮会依次发生动画效果。

方法链接

jQuery允许在同一个元素上连续运行多条jQuery命令，这种技术称为jQuery方法链接对于同一个元素，如果有多个动作需要依次举行，只需将新的动作追加到上一个动作的后面，形成一个方法链，无需每次重复查找选择相同的元素。基本语法为：$（selector）.action1（）.action 2（）.action3（）…actionＮ（）；
每个动作也可以另起一行

1
2
3
4
5
$（selector）.action1（）
.action 2（）
.action3（）
…
.actionＮ（）；

jQuery停止动画

可用stop（）方法停止动画或效果，语法结构为$（selector）.stop（［stopAll]，［gotoEnd］）；
参数意义如下：

  • stopAll：用于规定是否清除后续的所有动画内容，可填入布尔值。其默认值为false，表示，仅停止当前动画，允许动画队列中的后续动画继续执行。
  • gotoEnd：用于规定是否立即完成当前的动画内容，可填入布尔值，其默认值为false，表示直接终止当前的动画效果。
-------------本文结束感谢您的阅读-------------