jQuery slideToggle()方法
jQuery中的slideToggle()方法是用来分别显示隐藏的元素或隐藏可见的元素,即在slideUp()和slideDown()方法之间切换。
- 当元素被隐藏时,slideDown()被运行。
- slideUp()会在元素可见时运行。
语法:
$(selector).slideToggle()( speed, easing, callback )
参数:该方法接受上面提到的和下面描述的三个参数。
- speed:这是一个可选参数,用于指定渐变效果的速度。速度的默认值是400毫秒。速度的可能值是。
- milliseconds
- “slow”
- “fast”
- easing。它是一个可选的参数,用于指定元素在不同的动画点上的速度。缓和的默认值是 “摆动”。缓和的可能值是。
- “swing”
- “linear”
- callback。它是可选参数。该回调函数在slideToggle()方法完成后执行。
下面的例子说明了jQuery中的slideToggle()方法。
例子:这个例子显示或隐藏元素。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery slideToggle() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
(document).ready(function() {
("button").click(function() {
$("h1").slideToggle();
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<button>
Click on button to hide/show content
</button>
</body>
</html>
输出:
- 在点击按钮之前。
- 在单次点击按钮后。
- 双击按钮后。