jQuery中淡入与淡出

在我们jQuery中为我们封装了很多好玩的方法，我为大家介绍一下淡入与淡出！

我们需要配合事件来玩淡入淡出

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

淡入语法：$(“div”).fadeIn(多少毫秒完成)
(1)参数都可以省略
(2)speed:三种预定速度之一的字符串(“slow”“normal”or “fast”)或表示动画时长的毫秒数值(如:1000).
(3)easing:(Optiona)用来指定切换效果，默认是“swing”，可用参数“linear”
(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次

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

切换淡入淡出语法：$(“div”).fadeToggle(多少毫秒完成)
(1)参数都可以省略
(2)speed:三种预定速度之一的字符串(“slow”“normal”or “fast”)或表示动画时长的毫秒数值(如:1000).
(3)easing:(Optiona)用来指定切换效果，默认是“swing”，可用参数“linear”
(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次

使用方法如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: red;
        }
    style>
head>
<body>
    <button>点击淡出button>
    <button>点击淡入button>button>
    <button>点击切换淡入淡出button>
    <button>修改透明度button>
    <div>div>
body>
<script src="../js/jquery-1.8.3.min.js">script>
<script>
    // 给淡出button设置点击事件
    $("button").eq(0).click(function () {
        // $("div").fadeOut(多少毫秒完成淡出)
        // 不设置毫秒也是可以的
        $("div").fadeOut()
    })
    // 给淡入button设置点击事件
    $("button").eq(1).click(function () {
        // $("div").fadeIn(多少毫秒完成淡入)
        // 不设置毫秒也是可以的
        $("div").fadeIn()
    })
    // 给切换淡入淡出按钮设置点击事件
    $("button").eq(2).click(function () {
        // $("div").fadeToggle(多少毫秒完成淡入或淡出)
        // 不设置毫秒也是可以的
        $("div").fadeToggle()
    })
    // 给修改透明度按钮设置点击事件
    $("button").eq(3).click(function () {
        $("div").fadeTo(1000,0.1)
    })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

效果图：

在这里插入图片描述

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

相关阅读:
Redis 的性能常见问题
[激光原理与应用-19]：《激光原理与技术》-5- 激光器的增益、损耗、自激振荡条件
Clion 中文输入的问题
QMI8658A Datasheet Rev A-勘误表
【无标题】
基于Java web的企业办公自动化系统设计与实现
数据结构（严蔚敏版）第一章——复数的实现
javaVUE技术小区车辆档案车位管理系统设计与实现计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
优秀代码赏读之第一篇
JVM 类加载器

原文地址：https://blog.csdn.net/m0_74577714/article/details/134308353