day30_jQuery中的动画及案例练习（手风琴，美团外卖点餐，横向轮播）

小鱼儿 2023-06-03 15:53 3阅读 0赞

### 动画的基本语法 ###

1.  `show()` 元素显示 `hide()` 元素隐藏 `toggle()` 切换  
    底层的原理为`display`的状态（`block,none`）切换
    
    toggle里如果有**时间参数**，不设置元素宽高时从下到上文字隐藏从上到下显示  
    设置宽高（并加上边框线）后向左上角隐藏，右下角显示；  
    **fn回调函数**的意义是：**动画完成后执行**  
    `toggle`的参数意义（一般不设置参数）：第二个参数使用时要加双引号！  
    ![在这里插入图片描述][20191007001927274.png]
2.  上下滑动动画，使用方法同上  
    `slideDown()` 向下滑动 ；`slideUp()` 向上滑动 ；`slideToggle()` 切换两种状态  
    同理slideToggle中的回调函数是动画结束
3.  淡入淡出动画  
    `fadeIn();fadeout();fadeToggle();`同上，底层仍然是`display`的变化  
    `fadeTo()`:透明度到某个值变化  
    `opcity`：不透明度  
    ![在这里插入图片描述][20191007001918214.png]
4.  以上均为jquery中的**固定动画，无法修改**
5.  自定义动画（可以链式产生一个动画队列）  
    参数含义：  
    ![在这里插入图片描述][20191007001907988.png]
6.  `delay`：当前动画结束后产生一个延时后，下一个动画才开始执行
7.  `stop`:暂停当前动画；在队列中如果有等待执行的动画队列则执行下一个等待中的动画；  
    stop的两个参数含义：是否清除动画队列，是否立即完成动画  
    ![在这里插入图片描述][20191007001900145.png]
8.  `finish（）`：停止当前动画，立即完成动画队列；  
    `finish`和`stop（true，true）`的用法很相似，但是区别是  
    ![在这里插入图片描述][2019100700185560.png]
9.  禁止a标签跳转：`<a href="javascript:void(0);" >`  
    有个博客写的很详细了  
    [禁止a链接跳转][a]

### 手风琴案例 ###

简单的手风琴菜单（jQuery动画的语法熟悉）  
![在这里插入图片描述][20191007011212290.gif]

#### 图片横向轮播案例 ####

##### 知识点补充 #####

1.  `clone`克隆的参数：

> 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

1.  `trigger`:自动触发某事件 trigger(“事件”)  
    在每一个匹配的元素上触发某类事件。
2.  `timeStamp`：时间戳，当前事件距离浏览器打开的事件毫秒数

##### 实现效果 #####

![在这里插入图片描述][20191007005245122.gif]

##### 实现过程 #####

1.  写banner的自定义动画
2.  设置定时器图片连续轮播，当跳到最后一张时跳回第一张，因为可视区域为一张图片，所以在最后添加一张和第一张图片一样的图片（clone）
3.  左右点击事件

> 快速点击时图片显示混乱，使用stop没办法解决问题，使用**时间戳**，判断在一个动画（一张图片）展示结束后再执行自后的动画队列

> 右侧按钮点击后，执行两步：先将所有图片搬至左侧，在开始向右滑动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
时间戳的间隔时间要跟每次动画的时间一致！！

1.  鼠标进入离开事件  
    因为在鼠标离开后触发计时器，所以在刚开始要自动触发鼠标离开事件
2.  圈事件  
    根据num索引添加类

> 不能只给左侧正常滑动时添加点变色  
> 在圈事件中，要将当前的图片索引重新赋给num记录

实现代码：  
jquery部分

页面布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

### 美团案例 ###

##### 知识点补充 #####

1.  弹性盒子flex里的文本垂直居中问题，设置display:flex的元素设置align-item：center；一般文本的水平居中不使用text-align实现，使用padding
2.  左侧滚动条隐藏：调整左侧宽度，让滚动条溢出到右侧，然后溢出隐藏
3.  设置两侧的向上滑动效果时，要考虑当前的scrollTop+当前的position：top才能让元素移动到目标位置
4.  如果父容器没有定位，则子元素的offset和position值都是一直向上找，如果没有定位的父元素则是相对于浏览器的偏移量
5.  `position().top`后不加（），其余`scrollTop()`或`height()`要加（），不加参数是获取，加参数为设置

##### 实现效果 #####

![在这里插入图片描述][2019100701005489.gif]

##### 实现过程 #####

1.  点击左侧菜单，当前变色
2.  右侧对应显示左侧菜单对应的内容（自定义动画–scollTop值的确定）  
    ScrollTop除了要根据索引取到当前要显示的ul的position.top值，（如果不是第一次点击）还要加上当前的scrolltop值（已经移动出去的部分），否则会抵消掉一部分值
3.  同理，滑动右侧时左侧也要相应移动和变色

> 判断范围：什么时候属于下一菜单（right的scrollTop值加上每个ul的position：Top值其实是一组定值，是每个ul元素的起始位置，所以判断的  
> 范围是这个固定值~固定值+自身高）

1.  调整：当右侧滑动到下方一定位置时，左侧滚动条也要相应滑动，所以设置当右侧滑动到一半时，左侧固定显示下半部分内容

##### 实现代码 #####

jQuery

页面布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

### 手风琴轮播案例 ###

1.  在动画`animate`里面设置元素百分比的宽高时加`" "`；
2.  `animate`方法后要加时间参数
3.  在`animate`中，所有指定的属性必须用骆驼形式，比如用`marginLeft`代替`margin-left`.

##### 实现过程 #####

先判断好每个条（第几张）的位置，在显示的图片左边或右边，长度的变化等，然后添加图片，调整透明度及位置

##### 实现效果 #####

![在这里插入图片描述][20191007010751221.gif]

##### 实现代码 #####

jQuery

页面布局  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]  
其中，为了实现从中间向四周的效果，图片的初始样式为：

.content div img{ 
                position: absolute;
                width: 100%;
                height: 0;/*从中间向四周显示 的动画效果*/
                top:50%;/*隐藏在框的中间*/
                opacity: 0;
            }

[20191007001927274.png]: /images/20230601/2215017d6e394e4d89f55de9e7552d14.png
[20191007001918214.png]: /images/20230601/58e12253495142d08fad81341cf57647.png
[20191007001907988.png]: /images/20230601/abb6b8da3a184732b6672515ed207c33.png
[20191007001900145.png]: /images/20230601/5b68482da45d4141afaaa5f174889043.png
[2019100700185560.png]: /images/20230601/a426d8a2b1fb46ac9df40abbdb8128ea.png
[a]: https://www.cnblogs.com/lipanpan/p/4095524.html
[20191007011212290.gif]: /images/20230601/eb6bf985062642719c0de33fc4bdf5a9.png
[20191007005245122.gif]: /images/20230601/81a1386e965c4a56bdf84e39b83534e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20230601/d89fc2061a6349409b96cd9f9d94406b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20230601/fa0a74dba27d468b982832b9dda0414f.png
[2019100701005489.gif]: /images/20230601/7344d45b474f4b39b06d7ab94abad2e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20230601/d30255d1a4ad45569e780acd0a3b55a4.png
[20191007010751221.gif]: /images/20230601/fae8768403f24ec2be67b9e06b46f519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20230601/4fe40fa85b954d3c9a6e6592d79db210.png