笔记十一、jQuery动画

m0_69224248

已于 2023-10-12 09:51:49 修改

阅读量51

点赞数

文章标签：笔记 jquery 前端

于 2023-10-07 16:58:39 首次发布

本文链接：https://blog.csdn.net/m0_69224248/article/details/133644789

版权

一、隐藏与显示

在jQuery中，隐藏可以通过 hide() 方法来实现；显示则可以通过 show() 来实现。

注意：display 属性值是保存在 jQuery 的数据缓存中。假如一个元素的 display 属性值为 inline，那么当它隐藏后再显示时，这个元素将再次显示为 inline 模式。

函数格式如：hide([duration][,easing][,callback])

参数说明

1. hide( ): 不传参,则匹配的元素将被立即隐藏，没有动画

2. hide([duration][,easing]) : 传参，给定隐藏速度

3. hide([duration][,easing][,callback]):传参，指定速度，设置easing和回调函数callbac

如果选择的元素是可见的，则这个方法将不会改变任何东西；如果没有参数，匹配的元素将被立即显示，没有动画。

将元素 由下到上缩短隐藏（可以简单记忆为：从下往上擦除元素），在没有参数时，持续时间默认为400毫秒

使元素由上到下延伸显示，在没有参数时，持续时间默认为400毫秒（让隐藏的元素显示，对已经呈现显示状态的对象是没有作用效果的）

在 slideDown( ) 与 slideUp( ) 方法之间进行切换。如果元素向下滑动，则 slideToggle( ) 可向上滑动它们；如果元素向上滑动，则 slideToggle( ) 可向下滑动它们。

用于淡入已隐藏的元素（也就是 用来显示元素），元素透明度由 完全透明变为完全不透明。没有参数时，持续时间默认为400毫秒

用于淡出可见的元素（隐藏已显示的元素），没有参数时，持续时间默认为400毫秒。

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

允许渐变为给定的不透明度并保持，函数原型：fadeTo( duration, opacity [, callback ] )

duration：必需的，表示持续时间， 持续时间是以毫秒为单位的，数值越大，动画越慢。默认持续400毫秒的；'fast' 和 'slow' 分别代表 200 和 600 毫秒的延时。
opacity：必需的，值为0和1之间的数字，表示元素的不透明度，将淡入淡出效果设置为给定的不透明度，值越小越透明。0 完全透明，1 完全不透明；
callback：可选的，回调函数，动画完成时执行的函数

animate( ) 方法允许通过修改 CSS 样式来让元素从一个状态改变为另一个状态，从而实现动画的效果：animate( properties [, duration ] [, easing ] [, complete ] )

stop(stopAll, goToEnd)：停止当前动画直接到达当前动画的末状态，并清空动画队列

stopAll ：可选的，规定是否应该清除动画队列，即把当前元素接下去尚未执行完的动画队列清空。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
goToEnd：可选的，规定是否立即完成当前动画。默认是 false，因此，默认地，stop( ) 会清除在被选元素上指定的当前动画。可以用于让正在执行的动画直接到达结束时刻的状态。