jq初入行常用动画

--jq动画分类--
（1）jQuery的动画其实就是将之前提到过的各种特效进行封装，并对其性能进行优化。
（2）jQuery动画分为三个部分：非自定义动画，自定义动画，和全局动画设置。

一、非自定义动画：
1）显示、隐藏：
show( ) 、hide( )、toggle()
show()、hide()、toggle()方法有两种用法，一种是不传参数，代表直接显示隐藏。
另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。
eg：show(100)、hide(100)、toggle(100)
jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串''
show('fast')、hide('slow')、toggle('')；
三种参数的执行时间，分别为 ，'fast' ：200ms, ''(默认值):400ms, 'slow'：600ms
透明度改变从1到0

2）滑动：
slideUp()：向上滑动（隐藏）
slideDown():向下滑动（显示）
slideToggle()：滑动（自动）

3）淡入淡出：
fadeOut():淡出（隐藏）
fadeIn():淡入（显示）
fadeToggle():显示、隐藏
该方法是将元素的透明度从1变成0之后将元素的display属性设置为none;

但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法fadeTo()，该方法接受两个参数。
第一个参数是动画执行的时间，第二个参数是期望达到的透明度。

二、自定义动画
animate()方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个
参数是必填参数。动画执行完之后，执行回调函数。

$('div').animate({width:'500px',height:'500px'},5000,function(){
    console.log("111");
});

 

温馨提醒：在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数。

 

转载于:https://www.cnblogs.com/lmxHome/p/10749232.html