• 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

    效果图：

    在这里插入图片描述

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

  • 相关阅读:
    红外平行光管ZEMAX光学设计/SOLIDWORKS
    《基于工程伦理视角的无人驾驶》工程伦理课程设计
    学生HTML个人网页作业作品 HTML+CSS+JavaScript环保页面设计与实现制作
    题目：2833.距离原点最远的点
    瑞芯微rk3568移植openbmc（二）
    Android系统悬浮球开发，在Android12上不显示的问题排查与处理。
    初识C++多态
    Day 10：100322. 删除星号以后字典序最小的字符串
    【UniApp】-uni-app-打包成小程序
    python画图画字-turtle
  • 原文地址：https://blog.csdn.net/m0_74577714/article/details/134308353