Fork me on GitHub

(二)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 方法(在相同的元素上)。这样的话,浏览器就不必多次查找相同的元素。如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

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

posted @ 2018-03-13 20:27  TaoTao~  阅读(157)  评论(0编辑  收藏  举报