JQuery学习
jQuery语法
1、${selector).hide(speed,callback) 2、$(selector).show(speed,callback) 3、speed参数规定隐藏和显示的速度,取值为“slow”,"fast",毫秒(1秒等于1000毫秒)。4、$(selector).toggle(speed,callback)
//callback参数是隐藏或显示完成后执行的函数名称。
效果练习代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function (){
$("p").hide(2000)
})
$("#button2").click(function (){
$("p").show(2000,function (){
alert("恭喜你,显示完成")
})
})
$("#button3").click(function (){
$("p").toggle(1000,function (){
$("p").css({color:"blue"})
})
})
})
</script>
</head>
<body>
<p> jquery动画效果隐藏与显示</p>
<input type="button" value="隐藏" id="button1" >
<input type="button" value="显示" id="button2" >
<input type="button" value="按钮" id="button3" >
</body>
</html>
//hide()方法:是把指定的元素隐藏 /shoe()方法:是把指定元素显示出来。
2、滑动效果:slide()代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#slide,#panel {
padding: 5px;
text-align: center;
background-color: peachpuff ;
border: 1px solid burlywood ;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function (){
$("#panel").slideToggle()
})
})
</script>
</head>
<body>
<div id="slide">点击我,滑动显示或者隐藏面板</div>
<div id="panel">hello</div>
</body>
</html>
//slide()方法:slideUp()方法是把指定元素伸展,slideDown()方法是把指定元素压缩
3、创建自定义的动画:animate()方法将<div>元素右移200px代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function (){
$("div").animate({left:"200px"},1000,function (){
$("div").css({background:"pink"})
})
})
})
</script>
</head>
<body>
<button>开始动画</button>
<p></p>
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>
$(selector).animate({params}),speed,callback)
//默认情况下,所有的HTML元素有一个静止的位置,且是不可移动的,如果需要改变,那将要把元素的position属性改为:absolute,relative,fixed.
animate使用相对值代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function (){
$("div").animate({
left:"200px",opacity:'0.5',height: '160px',width: '160px'
})
})
})
</head>
<body>
<input type="button" value="开始动画" id="button" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>
//几乎可以用animate()方法来操作所有的CSS属性,但需要记住,当使用animate()方法的时候,必须使用camel标记法书写所有的属性名,eg:css.background color在animate中:backgroundColor.
使用animate()方法实现开始和暂停动画代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function (){
var div = $("div")
div.animate({height:"160px",opacity:0.5},5000)
})
$("#button1").click(function (){
$("div").stop()
})
})
</script>
</head>
<body>
<input type="button" value="开始动画" id="button" >
<input type="button" value="暂停动画" id="button1" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>