jQuery效果

迷南。 2023-07-03 12:15 18阅读 0赞

jQuery给我们封装了很多动画效果，最为常见的有四种：显示隐藏、滑动、淡入淡出和自定义动画。下面将详细的为大家介绍这四种动画！

## 一、显示隐藏 ##

#### 显示 ####

**语法规范**

show([speed,[easing],[fn]])

**参数**

1.  参数都可以省略，无动画直接显示
2.  speed：三种预定速度之一的字符串（“show”,“normal”,or “fast”）或表示动画时长的毫秒数值（如：1000）
3.  easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"
4.  fn:回调函数，在动画完成时执行的函数，每个元素执行一次

#### 隐藏 ####

**语法规范**

hide([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 切换 ####

> 切换就是点一下显示再点一下就隐藏

**语法规范**

toggle([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

## 二、滑动效果 ##

#### 上滑 ####

**语法规范**

slideUp([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 下滑 ####

**下滑效果语法规范**

slideDown([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 滑动切换 ####

**语法规范**

slideToggle([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 事件切换 ####

**语法规范**

hover([over,]out)

**参数**

1.  over:鼠标移到元素上要触发的函数（相当于mouseenter）
2.  out:鼠标移出元素要触发函数（相当于mouseleave）

## 三、淡入淡出效果 ##

#### 淡入 ####

**语法规范**

fadeIn([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 淡出 ####

**语法规范**

fadeOut([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 淡入淡出切换 ####

**语法规范**

fadeToggle([speed,[easing],[fn]])

**参数**  
*同显示的参数一样*

#### 渐进方式调整到指定的不透明度 ####

**语法规范**

fadeTo([speed],opactiy,[easing],[fn]])

**参数**

1.  opacity透明度必须写，取值0~1之间
2.  speed：三种预定速度之一的字符串（“show”,“normal”,or “fast”）或表示动画时长的毫秒数值（如：1000）必须写
3.  easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"
4.  fn:回调函数，在动画完成时执行的函数，每个元素执行一次

## 四、自定义动画 ##

**语法规范**

animate(params,[speed],[easing],[fn])

**参数**

1.  params：想要改变的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法。其余参数可以省略
2.  speed：三种预定速度之一的字符串（“show”,“normal”,or “fast”）或表示动画时长的毫秒数值（如：1000）必须写
3.  easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"
4.  fn:回调函数，在动画完成时执行的函数，每个元素执行一次

这就是四种主要的动画效果，下面为要写的是动画队列及其停止排队方法！

## 五、动画队列及其停止排队方法 ##

**动画或效果队列**

> 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

**停止排队**

stop()
    //stop()方法用于停止动画或效果

***注意：*** stop()写到动画效果的前面，相当于停止结束上一次的动画。

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery效果

jQuery hide()和show() 使用hide()和show()方法来隐藏和显示HTML元素: <!DOCTYPE html> <html>

布满荆棘的人生/ 2023年07月19日 13:30/ 0 赞/ 23 阅读

相关 jQuery效果

重点: 在做效果的时候难免会出现动画排队的现象,比如其他鼠标事件或者鼠标点击事件过快,效果来不及运行,就会出现排队显现,所以,我们要在做的动画的前面添加一个stop()方法

╰+攻爆jí腚メ/ 2023年07月08日 05:52/ 0 赞/ 18 阅读

相关 jQuery效果

jQuery给我们封装了很多动画效果，最为常见的有四种：显示隐藏、滑动、淡入淡出和自定义动画。下面将详细的为大家介绍这四种动画！一、显示隐藏显示语法

迷南。/ 2023年07月03日 12:15/ 0 赞/ 19 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 243 阅读

相关【JQuery】——窗口效果

【html】 <html> <head> <title>JQuery实战-窗口效果</title> <meta http-equiv="Content-Type"

- 日理万妓/ 2022年07月14日 04:11/ 0 赞/ 213 阅读

相关 JQuery手风琴效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tit

深藏阁楼爱情的钟/ 2022年05月31日 09:55/ 0 赞/ 280 阅读

相关 jquery特殊效果

fadeIn() 淡入 $btn.click(function(){ $('div1').fadeIn(10

ゞ浴缸里的玫瑰/ 2022年05月09日 14:34/ 0 赞/ 560 阅读

相关 jQuery效果

开发工具与关键技术：Visual Studio 2015–jQuery 作者：廖亚星撰写时间：2019年3月31日 MVC中jQuery有自带的动画效果可以让我们简

朴灿烈づ我的快乐病毒、/ 2022年02月23日 09:28/ 0 赞/ 283 阅读

相关放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码 1,html代码 1 <div id='small'><img src="./icon/images/sj1

向右看齐/ 2021年10月01日 03:30/ 0 赞/ 529 阅读

相关 jQuery 效果

首先引入jquery <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> 1

待我称王封你为后i/ 2021年07月24日 17:36/ 0 赞/ 461 阅读