jquery学习笔记(四):动画
内容来自【汇智网】jquery学习课程
4.1 显示和隐藏
在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
hide()的语法形式:$(selector).hide(speed,callback);
show()的语法形式:$(selector).show(speed,callback);
speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称,两个参数都是可选的。
示例如下:
1 <script type="text/javascript"> 2 $(function(){ 3 $("#hide").click(function(){ 4 $("div").hide(1000); 5 }); 6 $("#show").click(function(){ 7 $("div").show(1000); 8 }); 9 }) 10 $(function(){//删除a标记中的href属性 11 $("#a1").removeAttr("href"); 12 }) 13 </script> 14 ...省略代码 15 16 <h3> 隐藏和显示</h3> 17 <input type="button" id="hide" value="点击隐藏"> 18 <input type="button" id="show" value="点击显示"> 19 <div>在夕阳下奔跑,那是我逝去的青春。</div>
4.2 淡入淡出
在jQuery中,可以实现元素的淡入淡出效果。jQuery提供了四种fade方法:fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度(值介于0与1之间)
fadeIn()语法:$(selector).fadeIn(speed,callback);
fadeOut()语法:$(selector).fadeOut(speed,callback);
fadeToggle()的语法:$(selector).fadeToggle(speed,callback);
fadeTo()的语法:$(selector).fadeTo(speed,opacity,callback);
示例如下:
1 <script type="text/javascript"> 2 $(function(){//fadeIn()方法 3 $("button").click(function(){ 4 $("#div1").fadeIn(); 5 $("#div2").fadeIn("slow"); 6 $("#div3").fadeIn(3000); 7 }); 8 }) 9 $(function(){//fadeOut()方法 10 $("button").click(function(){ 11 $("#div1").fadeOut(); 12 $("#div2").fadeOut("slow"); 13 $("#div3").fadeOut(3000); 14 }); 15 }) 16 $(function(){//fadeToggle()方法 17 $("button").click(function(){ 18 $("#div1").fadeToggle(); 19 $("#div2").fadeToggle("slow"); 20 $("#div3").fadeToggle(3000); 21 }); 22 }) 23 $(function(){//fadeTo()方法 24 $("button").click(function(){ 25 $("#div1").fadeTo("slow",0.15); 26 $("#div2").fadeTo("slow",0.4); 27 $("#div3").fadeTo("slow",0.7); 28 }); 29 }) 30 </script> 31 ...省略代码 32 <button>点击这里,看效果</button> 33 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> 34 35 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div> 36 37 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
4.3 滑动效果
在jQuery中,可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。
slideDown()语法:$(selector).slideDown(speed,callback);
slideUp()语法:$(selector).slideUp(speed,callback);
slideToggle()的语法:$(selector).slideToggle(speed,callback);
参数speed规定效果的时长,可以取值:"slow"、"fast"或毫秒。callback参数是滑动完成后所执行的函数名称。
示例如下:
1 <script type="text/javascript"> 2 $(function(){//slideDown()方法 3 $("button").click(function(){ 4 $("#div1").slideDown("slow"); 5 }); 6 }) 7 $(function(){//slideUp()方法 8 $("button").click(function(){ 9 $("#div2").slideUp("slow"); 10 }); 11 }) 12 $(function(){//slideToggle()方法 13 $("button").click(function(){ 14 $("#div2").slideToggle("slow"); 15 }); 16 }) 17 </script> 18 ...省略代码 19 <div id="div2" style="width:222px;height:83px;background-color:#e5eecc;margin:0px;display:none;"> 20 吃香蕉不薄皮 21 22 吃葡萄不吐皮 23 </div> 24 <button id="btn" style="width:222px;height:23px;background-color:#e5eecc;margin-bottom:0px"> 25 点击这里,看效果 26 </button> 27 <div id="div1" style="width:222px;height:83px;background-color:#e5eecc;margin:0px"> 28 有没有点小小激动呢 29 30 想起那在夕阳下奔跑,那..那是我 31 逝去的青春 32 </div>
4.4 动画效果
在jQuery中,提供了animate()方法创建自定义的动画
语法:$(selector).animate({params},speed,callback);
params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数,前者规定效果的时长,取值为:"slow"、"fast"和毫秒;后者是动画完成后执行的函数
示例如下:
1 <script type="text/javascript"> 2 $(function(){ //增加表单中所有属性为可用的元素类别 3 $("#btn").click(function(){ 4 $("div").animate({ 5 height:"200px", 6 width: "660px" 7 },"slow",function(){ 8 $("div").animate({ 9 height:"80px", 10 width: "80px" 11 },"slow") 12 }); 13 }) 14 }) 15 </script> 16 ...省略代码 17 18 <h3> 动画效果</h3> 19 20 <input type="button" id="btn" value="点击看效果"> 21 <div style="width:80px;height:80px;background-color:#FF9966"></div>
4.5 停止效果
在jQuery中,提供了stop()方法用于停止动画或效果,在它们完成之前。stop()方法适用于所有的jQuery效果函数,包括滑动淡入淡出和自定义动画。
语法:$(selector).stop(stopAll,goToEnd);
stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行;后者规定是否立即完成当前动画,默认是false。
所以默认地stop()会清除在被选元素上指定的当前动画
1 ...省略代码<p></p> 2 <p><script type="text/javascript"> 3 $(function(){ 4 $("#flip").click(function(){ 5 $("#panel").slideToggle(5000); 6 }); 7 $("#stop").click(function(){ 8 $("#panel").stop(); 9 }); 10 }) 11 </script> 12 ...省略代码</p> 13 <h3 id="-">动画效果</h3> 14 <p><button id="stop">停止滑动</button></p> 15 <div id="flip"> 16 点击这里,向下滑动面板 17 </div> 18 <div id="panel"> 19 Hello world! 20 </div> 21 ...省略代码
posted on 2015-11-12 14:22 qiujinyong 阅读(125) 评论(0) 编辑 收藏 举报