JQuery学习笔记之淡入和淡出-CSDN博客

本文链接：https://blog.csdn.net/qq_29331365/article/details/52525438

html元素：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
    <p id="p1">我是段落1</p>
    <p id="p2">我是段落2</p>
    <p id="p3">我是段落3</p>
    <p id="p4">我是段落4</p>
    <button id="b1">淡出</button>
    <button id="b2">淡入</button>
    <button id="b3">渐变到指定的不透明度</button>
    <button id="b4">切换</button>
</body>
</html>

JQuery代码：

$(document).ready(function () {
    $("#b1").click(function () {
        $("#p2").fadeOut(1000, func1);         // 淡出可见元素(即隐藏元素)；
    });

    $("#b2").click(function () {
        $("#p2").fadeIn(1000, func2);          // 淡入已隐藏元素(即显示元素)；
    });

    $("#b3").click(function () {
        $("#p2").fadeTo(1000, 0.2);             // 渐变到指定的不透明度(0-1之间)；
    });

    $("#b4").click(function () {
        $("#p2").fadeToggle(1000);              // 切换淡入和淡出
    });

    function func1() {
        $("#p3").css("background-color", "green");
    }

    function func2() {
        $("#p3").css("background-color", "red");
    }
});