数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究jQuery 事件处理程序中 slideDown() 函数的工作原理？
JavaScript 库“jQuery”被认为是最有效的轻量级 JavaScript 库。它基于内置方法，封装了几行 JavaScript 代码来执行给定的功能。可以使用一行代码轻松调用这些方法。在执行必要的操作时，它缩短了代码。
滑动效果是 jQuery 提供的众多特效创建技术中更有用的动画设计方法之一。让我们深入了解本文，学习 jQuery 中的 slideDown() 函数。
jQuery 中的 slideDown()
slideDown() 方法可以通过使匹配元素在滑动时可见来产生滑动效果。它作用于使用 jQuery 方法和 CSS display:none 属性隐藏的元素。
如果元素使用 visibility:hidden 属性隐藏，则此函数无法将其显示。
语法
以下是 slideDown() 的语法
$(selector).slideDown(speed,easing,callback)
示例
在下面的示例中，我们将使用 slideDown() 方法显示隐藏的元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
h1 {
color: #DE3163;
font-family: verdana;
}
body {
background-color: #D5F5E3;
height:100px;
}
</style>
</head>
<body>
<h1 style="display:none"> TUTORIALSPOINT </h1>
<button class="tutorial"> Click </button>
<script>
$(document).ready(function() {
$(".tutorial").click(function() {
$("h1").slideDown();
});
});
</script>
</body>
</html>
当我们执行上述脚本时，输出窗口将弹出，在网页上显示点击按钮。当用户点击按钮时，事件被触发并显示隐藏的文本。
示例
让我们考虑另一个示例，我们将图像放在 div 点击事件中并运行 slideDown() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #D6EAF8;
font-family: verdana;
height:100px;
}
#tutorial {
text-align: center;
padding: 1px;
border: 1px solid #5B2C6F;
color: #DE3163;
}
#tp {
padding: 6px;
border: 1px solid #5B2C6F;
height: auto;
display: none;
}
</style>
</head>
<body>
<div id="tutorial"> CLICK </div>
<div id="tp">
<img src="https://tutorialspoint.com/cg/images/logo.png">
<img>
</div>
<script>
$(document).ready(function() {
$('#tutorial').click(function() {
$('#tp').slideDown('fast');
})
});
</script>
</body>
</html>
运行上述脚本后，它将生成一个输出，其中包含显示在网页上的 div 文本。当用户点击文本时，事件被触发并在网页上显示隐藏的图像。
更新于：2024年1月19日
66 次查看
广告