1,加入jquery库
2,文档就绪
$(document).ready(function(){
})
相当于:
$(function(){
})
基本语法:$===jquery;
$(sele
1. jQuery动画效果 隐藏和显示
两个方法:
hide() show()
toggle()
1.通过使用hide()和show()方法来隐藏和显示
<script>
$("document").ready(function(){ //jQuery入口函数
$("#button1").click(function(){
$("p").hide() })
$("#button2").click(function(){
$("p").show()
})
})
</script>
<body>
<p>jQuery动画效果,显示和隐藏</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
</body>
语法:
$(selector).hide(speed.callback)
$(selector).show(speed.callback)
可选参数:
speed参数规定隐藏和显示的速度,取值为“slow”“ fast ”毫秒(1秒等于1000毫秒)
callback参数:是隐藏或显示完成后执行的函数名称eg:
<script>
$("document").ready(function(){ //jQuery入口函数
$("#button1").click(function(){
$("p").hide(1000)
alert("恭喜你,隐藏完成")
})
$("#button2").click(function(){ $("p").show(2000,function(){
alert("恭喜你,显示成功!")
})
})
})
</script>
2.toggle()方法:切换hide()和show()
语法:
$(selector).toggle(speed.callback)可选参数:
speed参数规定隐藏和显示的速度,取值为“show”“ fast ”毫秒(1秒等于1000毫秒)
callback参数:是隐藏或显示完成后执行的函数名称
<script>
$("#button3").click(function(){
$("p").toggle(1000,function(){
$("p").css({color:"green"})
})
})
</script>
ctor).action()===jquery(selector).action{} 推荐用法 $ 符号
2.jQuery动画效果,滑动
两个方法:
slideDown()slideUp()
slideToggle()
eg:
<style>
#slide,#panel {
padding: 5px;
text-align: center;
background-color: #e5eecc; border: solid 1px #c3c3c3;
}
#panel{
display: none;
height: 50px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle() })
})
</script>
<body>
<div id="slide">点击我,滑动显示或者隐藏画板</div>
<div id="panel">Hello JQuery!</div>
</body>
3.jQuery动画效果,动画
animate()方法用于创建自定义的动画
语法:$(selector).animate({params},speed,callback)
必须的params参数定义形成动画的css属性
可选参数和上面的几个方法相同
eg:通过animate,把<div>元素向右移动200px
<script> $(document).ready(function(){
$("button").click(function (){
$("div").animate({left:"200px"},1000,function(){
$("div").css({background:"yellow"})
})
})
})
</script>
<body><button>开始动画</button>
<p>默认情况下,所有的HTML元素有一个静态的位置,且是不可移动的。如果需要改变那么需要将元素的position属性设置为:absolute,relative,fixed</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>
通过animate()操作多个属性
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'160px',width:'160px'})
})
})
</script>
<body>
<input type="button" value="开始动画" id="button"><div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>
是否可以用animate()方法来操作所有的css属性
几乎可以,但需要记住,当使用animate()方法的时候,必须使用camel标记法书写所有的属性名
eg:
css:background-color
在animate中:backgroundColoranimate()使用相对值:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:"200px",opacity:'0.5',height:'+=15px',width:'+=15px'})
})
})
</script>通过animate(),使用队列功能
如果你在彼此之间后编写多个animate()调用。jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div")
div.animate({height:'160px',opacity:0.5},1000) div.animate({fontSize:'2em'},100)
div.animate({width:'160px',opacity:0.9},1000)
div.animate({height:'100px',opacity:0.5},1000)
div.animate({width:'100px',opacity:0.9},1000)
div.animate({fontSize:'10px'},100)
})
</script>
<body><button>开始动画</button>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>