如何使用JQuery实现元素隐藏和显示的效果和方法说明大全

频道：互联网 日期： 浏览：2

jQuery 提供了多种方法来实现元素的隐藏和显示效果，以下是详细介绍：

基本的隐藏和显示方法

hide() 和 show() 方法

这是 jQuery 中最基本的隐藏和显示元素的方法。hide() 方法用于隐藏匹配的元素，show() 方法用于显示匹配的元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide and Show Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="hideBtn">Hide</button>
    <button id="showBtn">Show</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: blue;"></div>
    <script>
        $(document).ready(function() {
            $('hideBtn').click(function() {
                $('myDiv').hide();
            });
            $('showBtn').click(function() {
                $('myDiv').show();
            });
        });
    </script>
</body>
</html>

在上述代码中，当点击“Hide”按钮时，id 为“myDiv”的元素会被隐藏；当点击“Show”按钮时，该元素会显示出来。

这两个方法还可以接受一个可选的参数，用于指定动画的速度，例如：

$('myDiv').hide('slow');
$('myDiv').show('fast');

速度参数可以是“slow”（600 毫秒）、“fast”（200 毫秒）或一个表示毫秒数的整数。

如何使用JQuery实现元素隐藏和显示的效果和方法说明大全

toggle() 方法

toggle() 方法用于在元素的隐藏和显示状态之间切换。如果元素当前是隐藏的，调用 toggle() 方法会显示它；如果元素当前是显示的，调用该方法会隐藏它。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleBtn">Toggle</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: green;"></div>
    <script>
        $(document).ready(function() {
            $('toggleBtn').click(function() {
                $('myDiv').toggle();
            });
        });
    </script>
</body>
</html>

同样，toggle() 方法也可以接受一个可选的速度参数。

淡入淡出效果

fadeOut() 和 fadeIn() 方法

fadeOut() 方法用于通过淡入效果隐藏元素，fadeIn() 方法用于通过淡出效果显示元素。

示例代码：

如何使用JQuery实现元素隐藏和显示的效果和方法说明大全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade In and Out Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fadeOutBtn">Fade Out</button>
    <button id="fadeInBtn">Fade In</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
    <script>
        $(document).ready(function() {
            $('fadeOutBtn').click(function() {
                $('myDiv').fadeOut();
            });
            $('fadeInBtn').click(function() {
                $('myDiv').fadeIn();
            });
        });
    </script>
</body>
</html>

这两个方法也可以接受速度参数和回调函数，回调函数会在动画完成后执行。

fadeToggle() 方法

fadeToggle() 方法用于在淡入和淡出效果之间切换元素的显示状态。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade Toggle Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fadeToggleBtn">Fade Toggle</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: yellow;"></div>
    <script>
        $(document).ready(function() {
            $('fadeToggleBtn').click(function() {
                $('myDiv').fadeToggle();
            });
        });
    </script>
</body>
</html>

滑动效果

slideUp() 和 slideDown() 方法

slideUp() 方法用于通过向上滑动效果隐藏元素，slideDown() 方法用于通过向下滑动效果显示元素。

示例代码：

如何使用JQuery实现元素隐藏和显示的效果和方法说明大全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Up and Down Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="slideUpBtn">Slide Up</button>
    <button id="slideDownBtn">Slide Down</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: purple;"></div>
    <script>
        $(document).ready(function() {
            $('slideUpBtn').click(function() {
                $('myDiv').slideUp();
            });
            $('slideDownBtn').click(function() {
                $('myDiv').slideDown();
            });
        });
    </script>
</body>
</html>

这两个方法同样可以接受速度参数和回调函数。

slideToggle() 方法

slideToggle() 方法用于在向上滑动和向下滑动效果之间切换元素的显示状态。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Toggle Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="slideToggleBtn">Slide Toggle</button>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: orange;"></div>
    <script>
        $(document).ready(function() {
            $('slideToggleBtn').click(function() {
                $('myDiv').slideToggle();
            });
        });
    </script>
</body>
</html>