Basic animation
show()
will show hidden elements and
hide()
will hide visible elements.
Toggle()
hides when it is visible, and shows it when it is not.
All of the above animation methods can add parameters.
1. The first parameter is the duration of the animation, in milliseconds.
2. The second parameter is the callback function of the animation (a function that is automatically called after the animation is completed)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
});
</script>
</head>
<body>
<table style="float: left">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div
id="div1"
style="
float: left;
border: 1px solid;
background-color: blue;
width: 300px;
height: 200px;
"
>
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
Fade in and fade out animation
fadeIn()
fade in (slowly visible)
fadeOut()
fade out (slowly disappear)
fadeTo()
slowly modify the transparency to the specified value within the specified time. 0 transparent, 1 complete visible, 0.5 translucent
fadeToggle()
fade in/fade out switch
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function () {
//显示 show()
$("#btn1").click(function () {
$("#div1").show(1000, function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000, function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function () {
var temp = $("#div1").toggle(1000, abc);
});
var abc = function () {
$("#div1").toggle(1000, abc);
};
//淡入 fadeIn()
$("#btn4").click(function () {
$("#div1").fadeIn(1000, function () {
alert("淡入完成");
});
});
//淡出 fadeOut()
$("#btn5").click(function () {
$("#div1").fadeOut(1000, function () {
alert("淡出完成");
});
});
//淡化到 fadeTo()
$("#btn6").click(function () {
$("#div1").fadeTo(1000, 0.3, function () {
alert("淡化到完成");
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function () {
$("#div1").fadeToggle(1000, abd);
});
var abd = function () {
$("#div1").fadeToggle(1000, abd);
};
});
</script>
Go to jQuery event operation