jQuery的效果函数及如何运用

Posted 2020-08-09

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 完成后所执行的函数名称。