jQuery的动画效果

                jQuery的动画效果

老规矩！

一个小案例一份知识点！

今天给大家带来的是jQuery的动画效果！

首先吗？

当然还是给大家讲解一下jquery的动画效果是什么吧！

Jquery的动画效果呢！

简单的来说就是把css3的某一些动画效果进行就一个封装，就像jquery封装了一部分js一样。（额！怪怪的。反正就是封装）

在简单直白点就是jquery的某一些动画效果就是css3的简化版吧！

让我们写代码更加方便！

那么接下来就是我们今天的正片！

动画吗,首先讲的肯定就是显示跟隐藏了！

show（）显示隐藏的匹配元素。

比如！<p style="display: none">Hello</p>

$("p").show("slow");

被隐藏的标签p就被我们显示出来了

当然被hide()隐藏的元素我们show（）也是可以使它显示的。反之同理！

 

hide()隐藏显示的匹配元素。

       使用方法与show（）相似！

toggle() 1.无参数则切换显示/隐藏  2.参数为数字则为切换显示/隐藏时间（单位毫秒）

然后就淡入淡出的效果了

淡入淡出的效果主要是控制元素的透明度来使元素显示或者隐藏的

淡入淡出的效果有4个方法

分别是：

fadeIn()   通过透明度（0--1）使元素显示

fadeOut()  通过透明度（1--0）使元素隐藏

 fadeToggle() 可选地触发一个回调函数（当元素隐藏时通过透明度（0--1）使元素显示，反之当元素显示时通过透明度（0--1）使元素隐藏）

fadeTo()  给过渡到一个设置的透明度，参数（时间，透明度）；时间参数("slow","normal", or "fast") 

 

滑动的效果有3个方法:

( 滑动效果就是通过控制元素的height高度来实现显示/隐藏的一种效果)

1. slideDown()从隐藏到显示，高度从0增加；参数数字为时间，无参数则默认为1000（单位毫秒）
2. slideUp()的效果则是与slideDown()相反！

        slideUp()从显示到隐藏，高度正常减小到0；参数数字为时间，无参数则默认为1000（单位毫秒）。

    3. slideToggle()与toggle()类似//如果div是显示则使div的高度正常减小到0，隐藏则高度从0增加；参数数字为时间，无参数则默认为1000（单位毫秒）。

 

自定义动画的函数：（animate（））

animate（）用于创建自定义动画的函数。

可以设置元素的大小，宽度高度，位移，显示隐藏等等的变化过程（可以设置元素的运动过程的时间，运动快慢等等来达到动画的效果！

今天的知识点分享就到这里了

感谢大家的观看！