jQuery 滑动学习笔记
1. jQuery 滑动方法
jQuery 提供了一系列的滑动方法，可以使得网页元素以某种方式滑出或滑入视线。
以下是常用的 jQuery 滑动方法：
1.1 slideDown()
slideDown() 方法通过向下滑动来显示隐藏的元素，语法如下：
javascriptCopy Code$(selector).slideDown(speed,callback);
其中，speed 表示滑动的速度，可以取值为毫秒数或者字符串 "slow"、"fast"。callback 是在滑动完成后执行的函数。
示例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">点击我，展开面板</div>
<div id="panel">这里是面板内容</div>
</body>
</html>
1.2 slideUp()
slideUp() 方法通过向上滑动来隐藏可见的元素，语法如下：
javascriptCopy Code$(selector).slideUp(speed,callback);
其中，speed 表示滑动的速度，可以取值为毫秒数或者字符串 "slow"、"fast"。callback 是在滑动完成后执行的函数。
示例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">点击我，收起面板</div>
<div id="panel">这里是面板内容</div>
</body>
</html>
1.3 slideToggle()
slideToggle() 方法可以实现切换元素的显示与隐藏，如果元素已经显示，则隐藏；如果元素已经隐藏，则显示，语法如下：
javascriptCopy Code$(selector).slideToggle(speed,callback);
其中，speed 表示滑动的速度，可以取值为毫秒数或者字符串 "slow"、"fast"。callback 是在滑动完成后执行的函数。
示例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">点击我，展开或收起面板</div>
<div id="panel">这里是面板内容</div>
</body>
</html>
2. jQuery 滑动效果的应用
通过对 slideDown()、slideUp()、slideToggle() 方法的灵活运用，可以实现丰富的交互效果，下面举例说明：
2.1 使用 slideDown() 实现导航栏的滑动菜单
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 滑动菜单示例</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.container {
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
width: 200px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
padding: 10px;
display: none;
z-index: 1;
}
.nav .menu-item:hover .dropdown {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">LOGO</div>
<ul class="menu">
<li class="menu-item">菜单 1
<div class="dropdown">
<a href="#">子菜单 1</a>
<a href="#">子菜单 2</a>
</div>
</li>
<li class="menu-item">菜单 2</li>
<li class="menu-item">菜单 3
<div class="dropdown">
<a href="#">子菜单 1</a>
<a href="#">子菜单 2</a>
<a href="#">子菜单 3</a>
</div>
</li>
</ul>
<div class="search">Search</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".menu-item").mouseenter(function(){
$(this).children(".dropdown").slideDown(200);
});
$(".menu-item").mouseleave(function(){
$(this).children(".dropdown").slideUp(200);
});
});
</script>
</body>
</html>
2.2 使用 slideToggle() 实现弹出框的显示与隐藏
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 弹出框示例</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.button {
display: inline-block;
margin: 20px;
padding: 10px;
background-color: #333;
color: #fff;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 10;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="button">打开弹出框</div>
<div class="modal">
<div class="modal-content">
<span class="close">X</span>
<p>这里是弹出框的内容。</p>
</div>
</div>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".modal").slideToggle(200);
});
$(".close").click(function(){
$(".modal").slideToggle(200);
});
});
</script>
</body>
</html>
以上就是 jQuery 滑动学习笔记的全部内容。