JQ 作业一

最新推荐文章于 2024-06-12 11:46:09 发布

嗯一蓑烟雨任平生

最新推荐文章于 2024-06-12 11:46:09 发布

阅读量529

点赞数

本文链接：https://blog.csdn.net/weixin_42384421/article/details/82683759

版权

这篇博客详细介绍了如何使用JQ实现点击文字时，图片进行淡入、滑动出现和滑动淡出的效果。通过三个步骤达成目标：第一目标利用fadeIn()和fadeOut()实现图片的淡入淡出；第二目标借助SlideDown/Up/Toggle实现图片的滑动显示和消失；第三目标结合淡入淡出与滑动，创造出更丰富的交互体验。

摘要由CSDN通过智能技术生成

目标：点击文字，图片滑动与淡出，再点击，图片消失。

第一目标：点击，图片淡入，再点，消失。

一、首先用DIV+CSS布局页面，用display: none隐藏图片。
二、两个按钮，用fadeIn()和fadeOut()分别设置淡入和淡出效果。
三、发现还有两个fadeToggle()与fadeTo()可以尝试设置效果。
四、最后采用了fadeToggle()安置在一个按钮上，切换淡入淡出。

这里写图片描述

总结:

FadeIn()    淡入   $(被选择).fadeIn(速度,回调函数);

FadeOut()    淡出   $ (被选择).fadeIn(速度,回调函数);

FadeToggle()  切换。 $ (被选择).fadeIn(速度,回调函数);

FadeTo()    透明度 值在

最低0.47元/天解锁文章

嗯一蓑烟雨任平生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ 作业一

**目标：点击文字，图片滑动与淡出，再点击，图片消失。**第一目标：点击，图片淡入，再点，消失。一、首先用DIV+CSS布局页面，用display: none隐藏图片。二、两个按钮，用fadeIn()和fadeOut()分别设置淡入和淡出效果。三、发现还有两个fadeToggle()与fadeTo()可以尝试设置效果。四、最后采用了fadeToggle()安置在...
复制链接

扫一扫