jQuery中文开发文档
元素显隐效果
-
$(selector).show([speed], [easing], [fn] )
:元素显示 -
$(selector).hide([speed], [easing], [fn] )
:元素隐藏 -
$(selector).toggle([speed], [easing], [fn])
:元素自动切换显隐
参数说明
speed
:速度:慢速“slow”,正常“normal”,快速“fast” 或表示动画时长的毫秒数easing
:切换效果:摆动“swing”,直线“liner”fn
:动画完成时执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<style type="text/css">
#btn{
display: block; width: 200px; height: 40px; margin: 50px auto;
}
img{
/* display: none; */
}
</style>
<script>
$(function(){
// show():元素显示
$("#btn").click(function(){
// $("img").css("display", "block");
// $("img").show();
// $("img").show(2000);
// $("img").show(2000, function(){
// alert("我显示了");
// });
});
// hide():元素隐藏
$("#btn").click(function(){
// $("img").hide();
// $("img").hide(2000);
// $("img").hide(2000, function(){
// alert("我隐藏了");
// });
});
// toggle():元素切换显隐
$("#btn").click(function(){
// $("img").toggle();
// $("img").toggle(2000);
$("img").toggle(2000, function(){
alert("我切换了");
});
});
})
</script>
</head>
<body>
<button id="btn">按钮</button>
<br><br>
<img src="../timg.png" width="400">
</body>
</html>
滑动效果
通过高度变化动态地显示或隐藏元素
-
$(selector).slideDown([speed], [easing], [fn])
:通过调整高度来滑动显示元素 -
$(selector).slideUp([speed], [easing], [fn])
:通过调整高度来滑动隐藏元素 -
$(selector).slideToggle([speed], [easing], [fn])
:通过调整高度来切换元素的滑动显隐效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<style type="text/css">
#btn{
display: block; width: 200px; height: 40px; margin: 50px auto;
}