一、jQuery学习——jQuery效果
1.显示和隐藏效果:hide()和show()
<1> hide()方法:是把指定元素隐藏;
show()方法:是把指定元素显示出来.
<2>效果练习:实现jquery动画效果隐藏与显示
●代码如下:
<!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>
●代码实现:
点击“隐藏”和“显示”效果
点击“隐藏”→→→
点击“显示”↓↓↓
点击“按钮”效果
点击“按钮”→→→
再点击“按钮”→→→
点击“按钮”效果
点击“按钮”→→→
再点击“按钮”→→→
●语法
①$(selector).hide(speed,callback)
②$(selector).show(speed,callback)
③speed参数规定隐藏和显示的速度,取值为“slow”,“fast”,毫秒(1秒等于1000毫秒).
callback参数是隐藏或显示完成后执行的函数名称
④$(selector).toggle(speed,callback)
2.滑动效果:slide()
<1> slide()方法:slideUp()方法是把指定元素伸展;slideDown()方法是把指定元素压缩
<2>效果练习:点击我,滑动显示或者隐藏面板
●代码如下:
<!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>
●代码实现:
点击“点击我”↓↓↓
3.用于创建自定义的动画:animate()
<1>$(selector).animate({params},speed,callback)
params参数定义形成动画的css属性,可选参数和上面的几个方法相同
<2>效果练习:animate
①通过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>
●代码实现:
点击“开始动画”→→→
●注:默认情况下,所有的HTML元素有一个静置的位置,且是不可移动的,如果需要改变,那么需将元素的position属性设置为:absolute,relative,fixed
②通过animate,使用相对值
●代码如下:
点击“开始动画”→→→
●注:几乎可以用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()
})
//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>
●代码实现:
点击“开始动画” ↓↓↓
点击“暂停动画”
再点击“开始动画”
4.jQuery---链(Chaining)
通过jQuery,可以把方法链接到一起,Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)
●语法
①$(“#p1”).css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgroundColor:"bule"},1000)
意思:#p1元素首先会变红,然后向上以1.5秒的速度移动,然后向下以1.5秒的速度移动,最后将背景颜色变为蓝色
②如果不同链,写法是这样的:
$(“#p1”).css({'color':"red"})
$(“#p1”).slideUp(1500)
$(“#p1”).slideDown(1500)
$(“#p1”).animate({backgroundColor:"bule"},1000)
③通过Chaining的优点:浏览去不用多次去查找相同的优点