首页 > 代码库 > jQuery的效果函数及如何运用

jQuery的效果函数及如何运用

jQuery是JavaScript的一个库,它是一个轻量型的语言。它不仅有优秀的选择器,还有能实现各种页面效果的函数。下面我们就说说它的这些函数以及能实现怎样的效果。

1、jQuery中的hide()和show()函数。

在使用jQuery的时候,我们可以用hide()和show()函数来实现元素的显示和影藏。下面我们通过代码来说明下。

$("#hide").click(function(){

   $("p").hide();

});

在这段代码中元素通过了点击事件调用了hide()函数,就说明当我们点击按钮的时候页面中的p标签会被影藏起来。

$("#hide").click(function(){

   $("p").show();

});

在这段代码中元素通过了点击事件调用了show()函数,就说明当我们点击按钮的时候页面中的p标签会被显示出来。

2、jQuery中的toggle()函数。

我们可以通过toggle()函数来直接的切换hide() 和 show() 方法

当我们为元素调用toggle()函数后,我们就可以通过点击按钮来实现元素的显示和影藏,点击第一次元素显示,第二次元素影藏。

3、fadeIn()方法是元素的淡入效果,当我们为元素调用该函数时,我们点击按钮元素的透明度将会从0慢慢的显示到1,所看到的效果就是元素慢慢的由浅变深的显示出来。

4、fadeOut()方法是元素的淡出效果,当我们为元素调用函数时,我们点击按钮元素会由深入浅慢慢的消失。

5、slideDown()方法是元素折叠显示方法,当我们调用这个函数的时候,元素会向下滑动的显示出来,它有两个参数,第一个参数是它用多长时间来完成这个函数的执行,第二个参数是滑动完成后所的函数名称。

6、slideUp()方法是元素折叠隐藏方法,当我们调用这个函数的时候,元素会向上滑动直至隐藏起来,它有两个参数,第一个参数是它用多长时间来完成这个函数的执行,第二个参数是滑动完成后所的函数名称。

7、SlideToggle()方法是方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动,则 slideToggle() 可向上滑动它们。如果元素向上滑动,则 slideToggle() 可向下滑动它们

代码:$(selector).slideToggle(speed,callback);

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

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

8、jQuery的fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果

语法:$(selector).fadeToggle(speed,callback);

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

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

jQuery的效果函数及如何运用