JQuery动画淡入淡出效果

最新推荐文章于 2021-10-17 11:01:22 发布

_七七

最新推荐文章于 2021-10-17 11:01:22 发布

阅读量264

点赞数

分类专栏： JQuery 文章标签： js html

本文链接：https://blog.csdn.net/qq_43472877/article/details/106768742

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

淡入淡出显示和隐藏方式

fadeIn( [speed], [easing],[fn])
fadeout([speed], [easing],[fn])
fadeToggle([ speed, [easing],[fn]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>

    <script>
        //渐渐显示div
        function fadeIn() {
            $("#showDiv").fadeIn("slow","linear")
        }

        //渐渐收起div
        function fadeoutFn() {
            $("#showDiv").fadeOut("slow","swing")
        }

        //切换隐藏和显示
        function fadeToggleFn() {
            $("#showDiv").fadeToggle("slow")
        }
    </script>

</head>
<body>
    <input type="button" value="渐渐显示div" onclick="fadeIn()">
    <input type="button" value="渐渐收起div" onclick="fadeoutFn()">
    <input type="button" value="淡入淡出切换div的显示和隐藏" onclick="fadeToggleFn()">

    <div id="showDiv" style="height: 200px; width:200px; background-color: pink">
        div显示和隐藏
    </div>
</body>
</html>