jQuery动画知识总结

Posted 2020-08-09 萧诺

jQuery动画概述

我们之前实现的下拉菜单的案例，是没有动画效果的，但是在日常开发中，动画效果是经常会用到的，所以我们可以尝试使用jQuery动画，将下拉菜单案例实现的更动感一些。

jQuery提供了三组动画，这些动画都是标准的、有规律的效果，同时jQuery还提供了自定义动画的功能。

显示与隐藏

显示(show)与隐藏(hide)是一组动画：

show方法详解

show([speed], [callback]);
/* 
 speed(可选)：动画的执行时间
     1.如果不传，就没有动画效果。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
 callback(可选):执行完动画后执行的回调函数
*/

hide方法详解

与show方法的用法完全一致。

hide([speed], [callback]);
/*
 speed(可选)：动画的执行时间
 1.如果不传，就没有动画效果。
 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
 callback(可选):执行完动画后执行的回调函数
*/

toggle方法详解

toggle()方法可以用来切换元素的可见状态。

参数和show/hide方法基本一致

Toggle(speed, callback); 
//如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

注意：show/hide：修改的是元素的width、height、opacity。

 

滑入与滑出

 

滑入slideUp与滑出slideDown是一组动画，效果与卷帘门类似。

 

slideUp/slideDown,使用方法与show/hide基本一致。

 

slideUp方法详解

 

slideUp(speed, callback);
/*
 speed(可选)：动画的执行时间
     1.如果不传，默认为normal，注意和show/hide的区别。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)
 callback(可选):执行完动画后执行的回调函数
*/

 

slideDown方法详解

 

slideDown(speed, callback);
/*
 speed(可选)：动画的执行时间
     1.如果不传，默认为normal，注意和show/hide的区别。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)
 callback(可选):执行完动画后执行的回调函数
*/

 

滑入滑出切换

 

$(selector).slideToggle(speed,callback);
//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

 

注意：slideUp/slideDown：修改的是元素的height

 

 

淡入与淡出

 

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

 

fadeIn详解

 

fadeIn(speed, callback);
/*
speed(可选)：动画的执行时间
    1.如果不传，默认是normal。
    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    3.固定字符串，slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/

 

fadeOut详解

 

fadeOut(speed, callback);
/*
speed(可选)：动画的执行时间
 1.如果不传，默认是normal。
 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
 3.固定字符串，slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/

 

淡入淡出切换：

 

fadeToggle(speed, callback);
//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

 

淡入淡出到某个值

 

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明； 而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

 

fadeTo(speed, value, callback)
//可以设置具体的透明度
//speed（必须）
//value 0-1之间的数值(比如0.4)，表示淡到某一个值。
//callback(可选) 回调函数

 

注意: fade系列方法：修改的是元素的opacity

三组动画小结

1. jQuery给我们提供了三组动画：
   • show/hide
   • slideUp/slideDown
   • fadeIn/fadeOut
2. 动画切换方法：淡入淡出到某个值：fadeTo方法。
   • toggle
   • slideToggle
   • fadeToggle
4. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5. 这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。
   • show/hide修改的是元素的height,width,opacity
   • slide系列方法修改的是元素的height
   • fade系列方法修改的是元素的opacity