jquery动画效果学习笔记简介.docx

jquery动画效果学习笔记简介jquery动画效果学习笔记简介基本动画代码：复制代码代码如下:$(document).ready(function(){//基本的动画函数主要分为show,hide和toggle三个.都提供了无参数的版本//并且都提供了两个参数的重载，如show(speed,[callback]),//callback,签名如下:functioncallback(){this;}在回调函数中的'this是执行此函数的DOM对象.会在动画结束时执行.//因为回调函数可以省略,所以可以传入一个数值作为唯一参数,则会在参数规定的时间内用动画效果的显示/隐藏元素//参数可以使用三种预定速度之一的字符串("slow","normal","fast")//或直接使用数字表示动画时长，单位是毫秒数值(如500).//动画速度varspeed=500;//绑定事件处理$("#btnShow").click(function(event){//取消事件冒泡event.stopPropagation();//设置弹出层位置varoffset=$(event.target).offset();$("#pPop").css({top:offset.top+$(event.target).height()+"px",left:offset.left});//动画显示$("#pPop").show(speed);});//单击空白区域隐藏弹出层$(document).click(function(event){$("#pPop").hide(speed)});//单击弹出层则自身隐藏$("#pPop").click(function(event){event.stopPropagation()$("#pPop").hide(speed);});varflip=0;$("#btnP").click(function(){$("p").toggle("fast");//$("p").toggle(flip++%2==0);});//绑定事件处理$("#btnT").click(function(event){//取消事件冒泡event.stopPropagation();//设置弹出层位置varoffset=$(event.target).offset();$("#pPop").css({top:offset.top+$(event.target).height()+"px",left:offset.left});//切换弹出层的显示状态$("#pPop").toggle(speed);});});显示提示文字显示段落toggle函数测试弹出层这个是一个段落这个是第二个段落============================================================滑动动画和透明动画效果代码：复制代码代码如下:$(document).ready(function(){//滑动动画效果$("#btnShow").click(function(){$("#pPop").slideDown("fast");});$("#btnHide").click(function(){$("#pPop").slideUp("slow");});$("#btnT").click(function(){$("#pPop").slideToggle("slow");});//透明度动画效果$("#bShow").click(function(){$("#pPop").fadeIn(2000);});$("#bHide").click(function(){$("#pPop").fadeOut("slow");});//指定到透明度$("#bHelf").click(function(){$("#pPop").fadeTo("slow",0.3);});