读<jquery 权威指南>[3]-动画
一、 显示与隐藏——hide(),show()
1. 方法:
- hide(speed,[callback]);
- show(speed,[callback]);
说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。
callback是动画执行完的回调函数。
2.实例:
<style type="text/css"> body { font-size: 13px; } .artFram { border: solid 1px #ccc; background-color: #eee; width: 260px; padding: 8px; word-break: break-all; } .artList { line-height: 1.8em; } </style> <div class="artFram"> <div class="artList"> <span> </span> <span>jQuery</span> <span style="display:none">--write less,do more.</span> <a href="javascript:void(0)">显示</a> </div> </div>
<script type="text/javascript"> $(function () { var $link = $(".artList a"); var $hide = $(".artList :eq(2)"); $link.click(function () { if ($(this).html() == "显示") { $(this).html("隐藏"); $hide.show(1000,function(){alert("显示")}); } else { $(this).html("显示"); $hide.hide(800, function () { alert("隐藏")}); } }) }); </script>
二、切换显示隐藏——toggle()
1. 方法
- toggle():无参数,直接切换显示隐藏状态;
- toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
- toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。
说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。
2. 实例:
<div class="divFrame"> <div class="divMenu"> <input id="Button1" type="button" value="无参数"/><br /> <input id="Button2" type="button" value="逻辑显示" /><br /> <input id="Button3" type="button" value="动画显示"/> </div> <div class="divContent"> <img src="Images/img03.jpg" alt="" /> </div> </div>
<script type="text/javascript"> var isShow = false; var title = $(".divTitle"); var content = $(".divContent"); $(function () { title.click(function () { if (isShow) { $("img").slideUp("normal", function () { $("#divTip").html("关闭成功"); isShow = false; }); } else { $("img").slideDown("normal"); $("#divTip").html(""); isShow = true; } }); }); </script>
三、滑动效果——slide
- slideUp(speed,[callback]):向上滑动,减小元素高度至0
- slideDow(speed,[callback]):向下滑动,增大元素高度。
- slideToggle(speed,[callback]):以动画效果切换元素高度。
四、淡入淡出——fade
1. 淡入淡出方法
- fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
- fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;
实例:
<div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" value="fadeIn" class="btn" /> <input id="Button2" type="button" value="fadeOut" class="btn" /> </div> <div class="divContent"> <div class="divTip"></div> <img src="Images/img05.jpg" alt="" title="风景图片" style="display:none;" /> </div> </div>
<script type="text/javascript"> $(function () { $img = $("img"); //图片元素对象 $tip = $(".divTip"); //提示元素对象 $("#Button1").click(function () { //第一个按钮单击事件 $tip.html(""); //清空提示内容 //在2000毫秒中淡入图片,并执行一个回调函数 $img.fadeIn(2000, function () { $tip.html("淡入成功!"); }) }) $("#Button2").click(function () { //第二个按钮单击事件 $tip.html(""); //清空提示内容 //在2000毫秒中淡出图片,并执行一个回调函数 $img.fadeOut(2000, function () { $tip.html("淡出成功!"); }) }) }) </script>
2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。
实例:
<input type="button" id="btn" value="click" /> <div class="divContent"> <img src="Images/img06.jpg" alt="" title="风景图片" /> </div>
<script type="text/javascript"> $(function () { var opacity = 0.0; $("#btn").click(function () { if (opacity >= 1.0) { opacity = 0.0; } else { opacity += opacity + 0.2; } $("img").fadeTo("normal", opacity); }); }); </script>
五、自定义动画——animate
1.方法 :
animate(params,[duration],[easing],[callback])
说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。
注意:
params的属性名要使用骆驼写法,例如font-size要写成fontSize。
如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。
队列动画:在元素中执行一个或者多个animate方法。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。