2. jQuery Animation
Basic animation
- show() will show hidden elements
- hide() hides the visible elements.
- toggle() hides when it is visible, and shows it when it is not visible. Switch
Fade in and fade out animation
- fadeIn() fade in (slowly visible)
- fadeOut() fade out (slowly disappear)
- fadeToggle() Fade in/out. Switch
- fadeTo() slowly modify the transparency to the specified value within the specified time. 0 transparent, 1 complete visible, 0.5 translucent
In addition to 7, the above animation methods have two parameters, you can add one, two, or not.
- The first parameter is the duration of the animation execution, in milliseconds
- The second parameter is the callback function of the animation (a function that is automatically called after the animation is completed)
$("#div1").show( 2000 , function () { alert("show动画完成 ") } );
Method 7 has three parameters: 0 transparent, 1 complete visible, and 0.5 semi-transparent.
$("#btn7").click(function(){ $("#div1").fadeTo( 2000 , 0.5 ,function () { alert('fadeTo完成 ') });
Case presentation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</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">淡化切换fadeToggle()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化到fadeTo()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: yellow;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
</div>
</body>
</html>
Interface effect:
Example test:
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.显示 show()
$("#btn1").click(function () {
//$("#div1").show();
//$("#div1").show(2000);
$("#div1").show(2000,function () {
alert("show动画完成 ")
}); //后面的2 3 4 5 6都可以有这三种调用形式
});
//2.隐藏 hide()
$("#btn2").click(function () {
$("#div1").hide(1000,function () {
alert("hide动画 执行完成 ")
});
});
//3.切换 toggle()
$("#btn3").click(function () {
$("#div1").toggle(1000,function () {
alert("toggle动画 完成 ")
});
});
//4.淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//5.淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//6.淡化切换 fadeToggle()
$("#btn6").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
//7.淡化到 fadeTo()
$("#btn7").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
});
</script>
Regarding the toggle switch function, you can switch continuously to achieve animation effects:
The way to achieve constant switching is to call itself again after execution.
<script type="text/javascript">
$(function () {
var dynamicMov = function () {
$("#div1").toggle(1000,dynamicMov); //写dynamicMov() 错
} 自己不断调用自己
dynamicMov();
</script>