锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画：
1.show和hide
2.fadeIn和fadeOut
3.slideUp和slideDown
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> <title>jQuery中的动画</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; } .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; } </style> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> <script type="text/javascript"> /** * 1. show()和hide() * show()和hide()方法是jQuery中最基本的动画方法。在HTML中，为一个元素调用hide()方法，会将元素的display样式改为"none" * */ // $(function () { // $("#panel h5.head").toggle(function () { // $(this).next().hide("slow"); // }, function () { // $(this).next().show("slow"); // }) // }) /** * 2. fadeIn()和fadeOut() * fadeIn()和fadeOut()方法只改变元素的不透明度。 * fadeOut()方法会在指定的一段时间内降低元素的不透明度，直至元素完全消失("display:none")。 * fadeIn()方法则相反 * */ // $(function () { // $("#panel h5.head").toggle(function () { // $(this).next().fadeOut("slow"); // }, function () { // $(this).next().fadeIn("slow"); // }) // }) /** * 3. slideUp()和slideDown() * slideUp()和slideDown()方法只会改变元素的高度。 * 如果一个元素的display属性为"none",当调用slideDown()方法时，这个元素将由上至下延伸展示。 * slideUp()方法正好相反，元素将由下至上缩短隐藏。 * */ $(function () { $("#panel h5.head").toggle(function () { $(this).next().slideUp("slow"); }, function () { $(this).next().slideDown("slow"); }) }) </script> </html>
4.自定义动画
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <style type="text/css"> *{margin:0;padding:0;} body { padding: 60px } #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer} </style> </head> <body> <div id="panel"></div> </body> <script type="text/javascript"> /** * 4. 自定义动画--animate() * 语法结构为: animate(param, speed, callback) * param:一个包含样式属性及值的映射，比如{property1:"value1", property2:"value2"...} * speed:速度参数，可选 * callback:在动画完成时执行的函数，可选 * */ /** * 4.1 自定义简单动画 * */ // $(function () { // $("#panel").click(function () { // $(this).animate({left: "500px", top: "500px"}, 3000);//向右向下各移动500px // }); // }) /** * 4.2 累加、累减动画 * */ // $(function () { // $("#panel").click(function () { // $(this).animate({left: "+=500px"}, 3000);//从当前位置右移500px // }) // }) /** * 4.3 多重动画 * * 4.3.1 同时执行多个动画 * */ // $(function () { // $("#panel").click(function () { // $(this).animate({left: "500px", height: "200px"}, 3000); // }); // }) /** * 4.3.2 按顺序执行多个代码 * */ // $(function () { // $("#panel").click(function () { // $(this).animate({left: "500px"}, 3000); // $(this).animate({height: "200px"}, 3000); // }); // }) /** * 4.4 综合动画 * */ // $(function () { // $("#panel").css("opacity", "0.5"); // $("#panel").click(function () { // $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000) // .animate({top:"200px", width:"200px"}, 3000) // .fadeOut("slow"); // }); // }) /** * 4.5 动画回调函数 * * 在动画链式调用中，css的方法并不能按照调用链执行，如果需要执行css()方法，只需要使用到回调函数 * */ // $(function () { // $("#panel").css("opacity", "0.5"); // $("#panel").click(function () { // $(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000) // .animate({top:"200px", width:"200px"}, 3000, function () { // $(this).css("border", "5px solid blue"); // }) // }); // }) /** * 4.6 停止动画和判断是否处于动画状态 * */ /** * 4.6.1 停止元素的动画---stop() * 语法结构：stop([clearQueue], [gotoEnd]); * 参数clearQueue和gotoEnd都是可选的参数，为Boolean值(true或false) * clearQueue代表是否要清空未执行完的动画队列 * gotoEnd代表是否直接将正在执行的动画跳转到末状态 * * * 如果直接调用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画 * * 下面的实例可以防止光标快速移动时造成的动画效果与光标动作不一致，去掉stop后，如果快速移动光标，则会发生动画效果和光标动作不一致 * */ // $(function () { // $("#panel").hover(function () { // $(this).stop() // .animate({height: "150", width: "300"}, 200); // }, function () { // $(this).stop() // .animate({height: "22", width: "60"}, 300); // }) // }) //组合动画 // $(function () { // $("#panel").hover(function () { // $(this).stop(true) // .animate({height: "150"}, 200) //如果在此时出发了光标移出的事件 // //直接跳过后面的动画 // .animate({width: "300"}); // }, function () { // $(this).stop(true) // .animate({height: "22"}, 300) // .animate({width: "60"}, 300); // }) // }) /** * 第二个参数(gotoEnd)可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况。 * * 注意：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。 * */ /** * 4.6.2 判断元素是否处于动画状态 * 在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致 * */ // if(!$(element).is(":animate")){ // //如果当前没有进行动画，则添加新的动画 // } /** * 4.6.3 延迟动画 * 在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。 * */ // $(function () { // $("#panel").click(function () { // $(this).animate({left: "400px", height: "200px", opacity: "1"}, 3000) // .delay(1000) // .animate({top: "200px", width: "200px"}, 3000) // .delay(2000) // .fadeOut("slow"); // }) // }) /** * 4.7 其他动画方法 * 除了上面提到的动画方法，jQuery中还有4个专门用于交互的动画方法 * toggle(speed, [callback])-------在1.9中移除 * slideToggle(speed, [easing], [callback]) * fadeTo(speed, opacity, [callback]) * fadeToggle(speed, [easing], [callback]) * */ /** * 4.7.1 toggle()--可以切换元素的可见状态 * */ /** * 4.7.2 slideToggle()--通过高度变化来切换匹配元素的可见性，这个动画的效果只调整元素的高度 * */ // $(function () { // $("#panel").click(function () { // $(this).slideToggle(); // }); // }) /** * 4.7.3 fadeTo()--可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度 * */ // $(function () { // $("#panel").click(function () { // $(this).fadeTo(600, 0.2); // }); // }) /** * 4.7.4 fadeToggle()--通过不透明度变化来切换匹配元素的可见性。这个动画只调整元素的不透明度 * */ // $(function () { // $("#panel").click(function () { // $(this).fadeToggle(); // }); // }) </script> </html>
最后，动画方法的总结
| 方法名 | 说明 |
| hide()和show() | 同时修改多个样式属性，即高度、宽度和不透明度 |
| fadeIn()和fadeOut() | 只改变不透明度 |
| slideUp和slideDown() | 只改变高度 |
| fadeTo() | 只改变不透明度 |
| toggle() | 用来代替hide()和show()方法，所以会同时修改多个样式，即高度、宽度和不透明度 |
| slideToggle() | 用来代替slideUp和slideDown()方法，所以只能改变高度 |
| fadeToggle() | 用来代替fadeIn()和fadeOut()方法，所以只能改变不透明度 |
| animate() |
属于自定义的方法，以上各种动画方法实质内部都调用了animate()方法。 此外，直接使用animate()方法还能自定义其他的样式属性，例如："left","marginLeft","scrollTop"等 |
动画队列
- 一组元素上的动画效果
- 当在一个animate()方法中应用多个属性时，动画是同时发生的
- 当以链式的写法应用动画方法时，动画是按照顺序发生的(除非queue选项值为false)
- 多组元素上的动画效果
- 默认情况下，动画都是同时发生的
- 当以回调的形式应用动画方式时(包括动画的回调函数和queue方法的回调函数)，动画是按照回调顺序发生的
