jQuery-动画 animate() hide() show() toggle() fadeT0() slideToggle()
弹出层：点击按钮出现弹出层，点击弹出层本身或者网页任意处弹出层消失。
注，点击按钮时要取消冒泡event.stopPrepagation();设置弹出层的位置$(event.target).offset().top+'px', $(event.target).offset.left+'px'
$('#divPop').show()显示弹出层。点击网页任意处关闭弹出层$(document).click(function(event){$('#divPop').hide()});
js：
$(function(){ var speed=500; $('#btnShow').click(function(event){ event.stopPropagation(); var offset=$(event.target).offset(); $("#divPop").css({top:offset.top+$(event.target).height()+'px',left:offset.left+'px'}); $('#divPop').toggle(speed); }); $(document).click(function(event){$('#divPop').hide(speed);}); $('#divPop').click(function(event){$(this).hide(speed);}); });
toggle()切换元素可见状态：$('#divPop').toggle();
slideDown(),slideUp(),slideToggle()将元素滑上滑下。$('#divPop').slideToggle();
html:
<body> <div> <br/><br/><br/> <button id='btnShow'>显示提示文字</button> </div> <div id='divPop' style="background-color:#f0f0f0; border:solid 1px #000; width:300px; height:100px; position:absolute; display:none;"> <div style='text-align:center;'>弹出层</div> </div> </body>
fadeIn(),fadeOut(),fadeTo(),如果先设置了fadeTo(),则fadeIn()后不透明度会到达指定的位置；
Js
$(function(){ var speed=500; $('#btnShow').click(function(event){ var offset=$(event.target).offset(); $('#divPop').css({top:offset.top+$(event.target).height()+'px',left:offset.left+'px'}); $('#divPop').fadeTo(0,0.66); if($('#divPop').css('display')=='none'){ $('#divPop').fadeIn(speed); }else{ $('#divPop').fadeOut(speed); } }); });
animate(params,[duration],[easing],[callback]); animate(params,options)自定义动画；
参数说明
1.params(可选)
类型:Options
说明:一组包含作为动画属性和终值的样式属性和及其值的集合.
讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.
2.duration(可选)
类型:String,Number
说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.
3.easing(可选)
类型:String
说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
讲解:为了让元素逐渐达到params设置的最终效果, 我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.
4.options参数
类型:Options
说明:一组包含动画选项的值的集合。
讲解:所支持的属性如下:
- duration: 与上面的duration参数相同
- easing: 与上面的easing参数相同
- complete :类型为Function, 在动画完成时执行的函数
- step: Callback
- queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
练习：1自定义坠落动画；
设定透明度隐藏'opacity':'hide'，坠落高度，坠落后隐藏；
坠落高度：窗口高度-元素高度-元素顶部距离窗口顶部的距离；
js
<script type='text/javascript'> $(function(){ $("#divPop").animate({ "opacity":"hide", "top":$(window).height()-$("#divPop").height()-$("#divPop").position().top }, 600, function(){$("#divPop").hide();} ); }); </script>
练习2：让一个div越来越大然后消失
设定透明度隐藏'opacity':'hide'，最终宽度是窗口宽度-100，最终高度同理。
js:
<script type="text/javascript"> $(document).ready(function() { $("#divPop") .animate( { "opacity": "hide", "width": $(window).width()-100 , "height": $(window).height()-100 }, 500 ); });
html:
<body> <div id='divPop' style="background-color:#f0f0f0; border:solid 1px #000; width:300px; height:100px; position:absolute;"> <div style='text-align:center;'>弹出层</div> </div> </body>
jQuery.fx.off = true时，立刻关闭动画效果，false重新开启动画效果，
