jquery的fade方法实现淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
</head>

<body>
    <div id="ddvd" style="display: none;width: 200px ;
    height: 200px;background-color: #425a66"></div>

 <input id="in" type="button" value="fadein">
 <input id="out" type="button" value="fadeout">
 <input id="toggle" type="button" value="fadetoggle">
 <input id="fadeto" type="button" value="fadeto">

</body>
<script>
        $("#in").click(function () {
            $("#ddvd").fadeIn(1000);
        });
        $("#out").click(function () {
            $("#ddvd").fadeOut(1000);
        });

        $("#toggle").click(function () {
            $("#ddvd").fadeToggle(1000);
        });

            $("#fadeto").click(function () {
            $("#ddvd").fadeTo(1000,0.3); //后面的是透明度
        });

</script>
</html>

猜你喜欢

转载自www.cnblogs.com/TKOPython/p/12925518.html
今日推荐