jQuery的基础动画操作
jQuery入口函数:
$("document").ready(function(){ })
相当于
$(function(){ })
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>
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>
jQuery动画 停止动画 stop()
<script> $(document).ready(function(){ $("#button").click(function(){ var div = $("div") div.animate({height:'160px',opacity:0.5},3000) }) $("#button1").click(function(){ $("div").stop() }) }) </script> <body> <input type="button" value="开始动画" id="button"> <input type="button" value="暂停动画" id="button1"> <div style="background-color: red;height: 100px;width: 100px;position: absolute">Hello world!</div> </body>
jQuery 链(chaining)
通过jQuery ,可以把方法链接在一起,chaining允许我们在一条语句中运行多个jQuery方法(在相同元素上)
$("p").css({'color':'red'}),slideUp(1500),slideDown(1500),animate({backgroundColor:"blue"},1000)
意思:#p1元素首先会变红,然后向上以1.5秒的速度移动,然后向下以1.5秒的速度移动。最后将背景颜色变为蓝色
如果我们不同链,那么我们的写法是这样的$("#p1").css({'color':"red"}) $("#p1").slideUp(1500) $("#p1").slideDown(1500) $("#p1").animate({backgroundColor:"blue"},1000)
chaining的优点:
浏览去不用多次去查找相同的元素