一.用Jquery写二级菜单
二.Jquery的基础动画操作
<1>jquery的隐藏和显示
两个方法: hide()
show()
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script >
$(document).ready(function () {
$("#button1").click(function (){
$("p").hide()
})
$("#button2").click(function () {
$("p").show()
})
})
</script>
</head>
<body>
<p>jquery动画效果、隐藏和显示</p>
<p></p>
<p></p>
<input type="button"value="隐藏" id="button1">
<input type="button"value="显示" id="button2">
</body>
</html>
语法(selector).hide(speed,callback)
(selector).show(speed,callback)
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script >
$(document).ready(function () {
$("#button1").click(function (){
$("p").hide()
alert("恭喜你隐藏完成")
})
$("#button2").click(function () {
$("p").show( )
alert("恭喜你显示完成")
})
})
</script>
jQuery toggle()
通过 jQuery,可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素
<2>jquer滑动
两个方法:slideDown()
sildeToggle()
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
#silde,#silde{
padding: 5px;
text-align: center;
background-color: #4bffe8;
border: solid 1px #ff51d3;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function (){
$("#silde").click(function(){
$("#panel").slideToggle()
})
})
</script>
</head>
<body>
<div id="silde">点击我,滑动显示或者隐藏面板</div>
<div id="panel">Hello Jquery</div>
</body>
</html>
<3>jquery 通过animate实现动画
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function (){
$("div").animate({left:"200px"},1000,function(){
$("div").css({background:"yellow"})
})
})
})
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所以HTML元素有一个静态的位置,且是不可移动的。
如果需要改变,那么将元素position属性设置为,absolute; relative;fixed;
</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>
</html>
<4>通过animate操作多个属性
<input type="button" value="开始动画" id="button">
<div style="background-color:red; height:100px;width:100px;position:absolute"></div>
<script>
$(document).ready(function(){
$("#button").click (){
$("div").animate({
left:"200px",opacity:‘o.5’,height:'160px',width:'160px'
})
})
})
</script>