jQuery学习笔记三（jQuery效果）

jQuery中常用的特效有：隐藏、切换、滑动、淡入淡出等等。

隐藏与显示

通过使用jQuery中hide()和show()方法来隐藏和显示HTML元素。

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

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

可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或者是毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称。

下面的例子是一个带有speed参数的hide()方法：

$("button").click(function(){
  $("p").hide(1000);
});

显示与隐藏切换

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

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

可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast”或者毫秒。

可选的callback参数是toggle()方法完成后所执行的函数名称。

实例：

$("button").click(function(){
  $("p").toggle();
});

淡入淡出

通过jQuery，可以实现元素的淡入淡出功能。jQuery拥有以下几种fade方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

fadeIn()用于淡入已隐藏的元素。

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

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

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

fadeOut()用于淡出可见的元素。

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

参数含义同上。

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

如果元素已淡出，则fadeToggle()会向元素添加淡入效果。

如果元素已淡入，则fadeToggle()会向元素添加淡出效果。

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

参数含义同上。

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

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

 必须的speed参数规定效果的时长，它可以取以下值：“slow”、“fast”或是毫秒。

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

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

滑动效果

通过jQuery，可以在元素上实现滑动效果。jQuery拥有以下几种滑动方法：

• slideDown()
• slideUp()
• slideToggle()

slideDown()方法用于向下滑动元素。

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

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

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

slideUp()方法用于向上滑动元素。

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

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

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

slideToggle()方法可以slideDown()和slideUp()方法之间进行切换。

如果元素向下滑动，则slideToggle()可以向上滑动它们。

如果元素向上滑动，则slideToggle()可以向下滑动它们。

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

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

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

动画

animate()方法用于创建自定义动画。

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

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

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

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

提示：默认的，所有HTML元素都有一个静态位置，且无法移动。

如果需要对位置进行操作，要记住首先把元素的CSS position属性设置为relative、fixed或absolute。

提示：可以用animate()来操作所有CSS属性吗？

几乎可以，不过，需要记住一件事情当使用animate()时，必须使用Camel标记法书写所有属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。

同时，色彩动画不包含在核心jQuery库中。

如果需要生成颜色动画，需要从jQuery.com下载Color Animation插件。

注意：animate()还可以使用预定义的值“show”、“hide”或“toggle”。

stop()方法用于停止动画或效果，在他们完成之前。它适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的stopAll参数规定是否应该清除动画序列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的goToEnd参数规定是否立即完成当前动画。默认是false。

因此，默认地，stop()会清除在被选元素上指定的当前动画。

Callback()函数，当动画100%完成时，即调用Callback函数。

由于JavaScript语句（指令）是逐一执行的 — 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，我们一般使用Calbackl函数。

$(selector).hide(speed,callback)