(二)jquery学习----jquery的效果

jquery的效果

jquery的基本效果包括隐藏、显示、切换，滑动，淡入淡出，以及动画等等。

一、隐藏与显示

通过调用hide()和show(）方法实现。

语法如下：

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

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

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

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

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

二、淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素 显示在页面上

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

jQuery fadeOut() 方法用于淡出可见元素 消失在页面上

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

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

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

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

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

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

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

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

三、滑动效果

调用slideDown(）和sildeUp().

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

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

语法：

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

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

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

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

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

四、创建动画

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

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

 

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

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

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

五、停止动画

Query stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

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

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

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

六、Callback()

$(selector).action(**,callback())

callback函数是在动画完成后才调用的。

六、jquery 链

Chaining 允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

注意：当进行链接时，代码行会变得很差。