jQuery之淡入与淡出




<!DOCTYPE html>
<html>
<head>
    <title>jQuery淡入淡出示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#fadeInOut").click(function(){
                $("#box").fadeToggle();
            });
        });
    </script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            display: none;
        }
    </style>
</head>
<body>
    <button id="fadeInOut">淡入/淡出</button>
    <div id="box"></div>
</body>
</html>

这段代码展示了如何使用jQuery的fadeToggle函数来实现一个元素的淡入和淡出效果。当点击按钮时，#box元素会在可见与隐藏之间切换，使用fadeToggle方法可以平滑地进行这种切换，提供了更好的用户体验。

jQuery之淡入与淡出

评论已关闭

推荐阅读