jQuery动画与特效

参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

//1.显示与隐藏 //其实就是修改元素的高度和低度 //显示匹配的元素：show([speed,[easing],[fn]]) //speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值 //easing:用来指定切换效果，默认是swing，可用参数linear //fn:在动画完成时执行的函数，每个元素执行一次。 $( "#div1" ).show(); //直接显示 $( "#div1" ).show( "slow" ); //缓慢动画显示 $( "div" ).show(1000); //以毫秒数来显示动画 $( "div" ).show(1000, function (){alert( 'aa' )}); //显示完成后弹框 //隐藏匹配的元素：hide([speed,[easing],[fn]]) $( "#div1" ).hide();       //2.滑动 //slideDown()和slideUp() //向下显示：slideDown([speed],[easing],[fn]) //向上显示：slideUp([speed,[easing],[fn]]) //speed：可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒)，或者直接一个毫秒值 //easing:用来指定切换效果，默认是swing，可用参数linear //fn:在动画完成时执行的函数，每个元素执行一次。 <input type= "button" class= "btn2" value= "滑动出来" /> <input type= "button" class= "btn3" value= "隐藏回去" /> <div style= "display:none" >      测试<br>      测试<br>      测试<br>      测试<br>      测试<br>      测试<br> </div> $( function (){      $( ".btn2" ).click( function (){        $( "div" ).slideDown();      });      $( ".btn3" ).click( function (){        $( "div" ).slideUp();      }); }); //自动判断元素高低来决定向上或者向下滑动：slideToggle()参数同slideDown,slideUp //单击动画按钮，如果是显示的则隐藏，如果是隐藏的则自动显示 <input type= "button" class= "divFrame" value= "动画" /> <div>      <img src= "a.jpg" /> </div> $( ".divFrame" ).click( function (){    $( "img" ).slideToggle(3000, function (){      $( "img" ).css({          border: 'solid 1px #ccc'      });    }) });       //3.淡入淡出：fadeln()和fadeOut() //淡入和淡出也是改变元素的显示，跟show类型 //只不过show是改变元素高低，fade是改变元素的透明度 //使图片淡入或者淡出 <input type= "button" class= "in" value= "淡入" /> <input type= "button" class= "out" value= "淡出" /> <div>      <img src= "a.jpg" style= "display:none" /> </div> //jQuery $( ".in" ).click( function (){    $( "img" ).fadeIn( "slow" , function () {      alert( "淡入成功" );    }); }); $( ".out" ).click( function (){    $( "img" ).fadeOut( "slow" , function () {      alert( "淡出成功" );    }); }); //可自定义透明度 //fadeTo([[speed],opacity,[easing],[fn]]) //其中多的一个参数opacity为透明度的值，比如0.7 $( "img" ).fadeTo( "slow" ,0.7);          //4.自定义动画animate() //animate(params,[speed],[easing],[fn]) //params:一组包含作为动画属性和终值的样式属性和及其值的集合 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) //easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". //fn:在动画完成时执行的函数，每个元素执行一次。 //单击变大按钮，将div变大 <button id= "go" >变大</button> <div id= "block" >Hello!</div> //jQuery $( "#go" ).click( function (){    $( "#block" ).animate({      width: "90%" ,      height: "100%" , //同样这里也可以使用left和right让元素左右移动      fontSize: "10em"    }, 1000 ); });

来自为知笔记(Wiz)

转载于:https://my.oschina.net/u/1045699/blog/786556