JQuery实现DIV其他动画效果的简单实例
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
1.toggle
切换对象的隐藏和显示，可以用来代替show和hide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
2.fadeIn fadeOut
fadeIn 淡入（本来是隐藏的），fadeOut 淡出（本来是显示的）
fadeOut
淡出的时候 这一块的空间就会被隐藏 而下方的模块会往上移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
fadeIn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
3.fadeTo
切换到一个指定的透明度：0表示彻底透明，1表示不透明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
4.slideUp和slideDown
slideUp：向上滑动隐藏对象
slideDown:向下滑动显示对象（说明本来是隐藏的）
slideUp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
slideDown
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
5.slideToggle
滑动实现对象的隐藏与显示切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
background-color:red;
border:1px black solid;
clear:both;
}
#btn,#info
{
float:left;
}
#info
{
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.1.js">
以上这篇JQuery实现DIV其他动画效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇：通过jquery实现页面的动画效果(实例代码)
下一篇：JQuery遍历元素的后代和同胞实现方法