jQuery动画效果练习
一、动画隐藏和显示
方法:hide()和show()
toggle()表示切换hide和show的状态
$(document).ready(function(){
$("#button1").click(function(){
$ ( "p").hide(500,function(){
alert("隐藏完成")
})
})
$("#button2").click(function(){
$( "p").show(200,function(){
alert("显示成功")
})
})
$("#button3").click(function(){
$("p").toggle(1000,function(){
$("p").css({color:"yellow"})
})
})
})
二、动画滑动
方法:#slide和#panel
#slide,#panel{
padding: 5px;
text-align: center;
background-color: #33b5e5;
border: solid 1px red;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle()
})
})
</script>
三、animate方法创建自定义的动画
语法:$(select).animate({params},speed,cellback)
注意:
1.必须的params参数必须写在大括号内其他的参数和上面一致
2.在未给定位之前,html里的元素都默认有一个静态定位,且是不可移动的。如果想要移动,要将position设置为absolute,relative
3.animate方法几乎可以改变所有的的css属性,但前提是该属性用 驼峰命名法 命名
比如:在css中:background-color : black; 在animate中:backgroundColor:“black”
4.animate使用相对值:在需要提升的值上加“+=”,即可实现“继续增加”
5.animate使用队列功能:如果编写多个animate()调用,jQuery会创建包含这些方法内部调用的队列
开始动画
默认情况下,所以的HTML元素有一个静态的位置,且是不可移动的,如果需要改变,那么需要将元素的position的属性设置为:absolute,relatIve,fixed;
animate():使用相对值
(document).ready(function(){
$("#button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'
})
})
})
通过animate(),使用队列功能(如果你在彼此 之后向编写多个animate()调用。jQuery会创建包含这些方法调用的“内部”,队列然后逐一运行这些animate调用)
$(document).ready(function(){
$("#button").click(function(){
var div= $("div")
div.animate({height:"160px" ,opacity:"0.5"},1000)
div.animate({fontSize:"2px" },1000)
div.animate({width:"160px" ,opacity:"0.9"},1000)
div.animate({height:"100px" ,opacity:"0.5"},1000)
div.animate({height:"100px" ,opacity:"0.9"},1000)
div.animate({fontSize:"10px" },1000)
})
})
停止动画:stop()
stop()用于在动画完成前对它进行停止,只能暂停队列中的一个动画,如果队列中有很多个动画,它会结束当前的动画,然后运行下一个动画
四、jQuery——链(chaining)
通过jQuery,可以把方法连接在一起,chaining允许我们在一条语句中运行多个方法(在同一元素上)
$(“p”).css({color:“red”}).slideUp(2000).slideDown(2000).animate(backgroundColor:“blue”);
作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>二级菜单</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
})
</script>
<style>
*{
list-style: none;
text-decoration: none;
font-family: "黑体";
}
a{
color: black;
}
nav{
height: 40px;
width: 500px;
background-color: aqua;
margin: 0 auto;
}
nav ul {
margin: 0 auto;
}
nav ul li{
height: 40px;
width: 70px;
text-align: center;
line-height: 40px;
float: left;
margin-left: 8px;
position: relative;
}
nav ul li:hover{
background-color: green;
}
nav ul li:hover a{
color: yellow;
}
nav ul li ul{
float: none;
padding: 0;
position: absolute;
left: -8px;
display: none;
}
nav ul li ul li{
background-color: indigo;
height: 40px;
width: 90px;
}
nav ul li ul li:hover{
background-color: yellow;
}
nav ul li ul li:hover a{
color: indigo;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">首页</a>
</li>
<li "divDisplay_one()" "div_one()">
<a href="#">课程大厅</a>
<ul id="one">
<li>
<a href="#">web网页实战</a>
</li>
<li>
<a href="#">服务端技术</a>
</li>
<li>
<a href="#">Python技术</a>
</li>
</ul>
</li>
<li>
<a href="#">学习中心</a>
</li>
<li "divDisplay_two()" "div_two()">
<a href="#">经典案例</a>
<ul id="two">
<li>
<a href="#">Java</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">C#</a>
</li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</nav>
</body>
<script>
var a = $("#one");
var b = $("#two");
function divDisplay_one(){
a.css({display:"block"});
}
function div_one(){
a.css({display:"none"});
}
function divDisplay_two(){
b.css({display:"block"});
}
function div_two(){
b.css({display:"none"});
}
</script>
</html>