jQuery特效函数-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务

jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素

一、任务目标

在本次课程中，我们将学习如何使用jQuery的show()和hide()方法，为元素的显示和隐藏添加动画效果。通过完成本次任务，你将能够熟练掌握这些特效函数，为网页增添更丰富的交互体验。

二、任务内容

创建一个HTML页面，包含一个按钮和一个要显示/隐藏的元素（如一个<div>容器）。
使用jQuery的hide()方法，在页面加载时隐藏该元素。
为按钮绑定点击事件，当点击按钮时，切换元素的显示/隐藏状态。使用show()和hide()方法，并添加动画效果。
（可选）尝试使用不同的动画速度和回调函数，观察效果变化。

三、实现步骤

创建HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Show/Hide 动画效果</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleButton">显示/隐藏</button>
    <div id="myElement" style="width: 200px; height: 200px; background-color: lightblue;">
        这是一个要显示/隐藏的元素
    </div>
    <script>
        // 在这里编写jQuery代码
    </script>
</body>
</html>

编写jQuery代码：

在<script>标签内添加以下代码：

$(document).ready(function() {
    // 页面加载时隐藏元素
    $('#myElement').hide();
    
    // 绑定按钮点击事件
    $('#toggleButton').click(function() {
        if ($('#myElement').is(':visible')) {
            // 如果元素是可见的，则隐藏它
            $('#myElement').hide('slow', function() {
                console.log('元素已隐藏');
            });
        } else {
            // 如果元素是隐藏的，则显示它
            $('#myElement').show('slow', function() {
                console.log('元素已显示');
            });
        }
    });
});

测试与观察：

保存HTML文件并在浏览器中打开它。你应该会看到一个按钮和一个被隐藏的元素。当你点击按钮时，元素应该会以动画的形式显示或隐藏，并且控制台会输出相应的日志信息。

四、总结与拓展

通过本次任务，我们学习了如何使用jQuery的show()和hide()方法为元素的显示和隐藏添加动画效果。你可以尝试调整动画速度（如将'slow'替换为具体的毫秒数）或添加自定义的回调函数来进一步拓展这个功能。

jQuery特效函数-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务

评论已关闭

推荐阅读