JQ 簡單動畫顯示隱藏效果
阿新 • • 發佈：2017-11-03
utf-8 border head ack ext char body toggle pad
一、概括
jq的顯示隱藏動畫總共有：
普通顯示隱藏效果主要用了hide、show、toggle
淡入淡出主要用到了fadeIn、fadeOut、fadeToggle
滑動效果主要用了slideDown、slideUp、slideToggle
其中各效果用到的toggle都是其他兩個屬性的切換
二、實例
普通顯示隱藏效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(
淡入淡出效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$(
滑動效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出現</div>
<div id="slideUp">隱藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
JQ 簡單動畫顯示隱藏效果