jquery animation
1、显示与隐藏
(1) 传统的javascritp控制元素显示与隐藏
//显示 document.getElementById("#box").style.display="block"; //隐藏 document.getElementById("#box").style.display="none";
(2) jquery控制元素显示与隐藏
$(function () { //显示元素 $("#box").show(); $("#box").css("display", "block"); //隐藏元素 $("#box").hide(); $("#box").css("display", "none"); })
(3) jquery控制元素动画效果显示与隐藏
其语法格式：
show( speed，[callback] )
hide( speed，[callback] )
a. 参数speed表示执行动画时的速度，该速度有3个默认字符值：
slow，其对应的速度是0.6秒；
normal，其对应的速度是0.4秒；
fast，其对应的速度是0.2秒；
如果不使用默认的字符值，也可以直接写入数字，如"3000"，表示该动画执行的速度为3000毫秒；
b. 可选函数[callback]为在动画完成时执行的回调函数，该函数每个元素执行一次；
(4) toggle方法
该方法的功能是切换元素可见状态，即如果是显示状态，则变成隐藏状态；如果是隐藏状态，则变为显示状态。
该方法有三种调用形式：
a. 无参数调用格式：toggle()
b. 逻辑参数调用格式：toggle(switch)
参数switch为一个布尔值，即true或false。当该值为true时，显示元素；否则，隐藏元素。
c. 动画效果调用格式：toggle(speed，[callback] )
参数speed和可选参数[callback]与方法show(speed，[callback])中的参数所表示的意义一样。
说明：无论是show()和hide()还是toggle()方法，当以动画效果切换页面元素可见状态时，其元素的width、height、padding和margin属性都将以动画的效果展示。
2、滑动
(1) slideDown()
语法格式如：slideDown(speed，[callback] )
其功能是以动画的效果将所选择的元素的高度向下增大，使其呈现一种"滑动"的效果，而元素的其他属性并不发生变化，参数speed为动画显示的速度，可选项[callback]为动画显示完成后，执行的回调函数。
(2) slideUp()
语法格式如：slideUp(speed，[callback] )
其功能是以动画的效果将所选择元素的高度向上减少，同样也是仅改变高度属性，其包含的参数作用与slideDown()方法一样。
说明：无论是slideDown()还是slideUp()方法，它们的动画效果仅是减小或增加元素的高度，同时，如果元素有margin或padding值，这些属性也会以动画效果一起发生改变。
<body> <div id="box" style="width: 300px; height: 200px; background: red;"> </div> <div style="padding-top: 10px;"> <input type="button" name="name" value="slideup" id="slideup" /> <input type="button" name="name" value="slidedown" id="slidedown" /> <input type="button" name="name" value="slidetoggle" id="slidetoggle" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#slideup").click(function () { //高度向上减小，即隐藏 $("#box").slideUp(600); }) $("#slidedown").click(function () { //高度向下增大，即显示 $("#box").slideDown(600); }) $("#slidetoggle").click(function () { $("#box").slideToggle(600); }) }) </script>
(3) slideToggle()
在jquery中，通过slideToggle()方法，可以根据当前元素的显示状态，自动进行切换，其语法格式如：
slideToggle(speed，[callback] )
其功能是以动画的效果切换所选择元素的高度，即：如果高，则减小；如果低，则增大。同时，在每次执行动画完成后，可执行一个用于回调的函数。
3、淡入淡出
通过元素渐渐变换背景色的动画效果来显示或隐藏元素。
show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果是使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。
在jquery中，fadeIn()和fadeOut()方法通过动画效果，改变元素的透明度切换元素显示状态，其透明度从0.0到1.0淡入或从1.0到0.0淡出，从而实现淡入淡出的动画效果；fadeTo()是将透明度指定到某一个值，从而实现动画效果。
(1) fadeIn(speed，[callback] )
该方法的功能是通过改变所选元素透明度，实现淡入的动画效果，并在完成时，可执行一个回调函数。
参数speed为动画效果的速度；
可选项参数[callback]为动画完成时执行的回调函数。
(2) fadeOut(speed，[calllback] )
该方法的功能是通过改变所选元素透明度，实现淡出的动画效果，其包含参数的功能与fadeIn()方法一样。
(3) fadeTo(speed，opactity，[callback] )
该方法的功能是将所选择元素的不透明度以动画的效果调整到指定的不透明度值，动画完成时，可以执行一个回调函数。
参数speed为动画效果的速度；
参数opacity为指定的不透明值，取值范围是0.0~1.0；
可选项参数[callback]为动画完成时执行的函数。
<body> <div id="box" style="width: 300px; height: 200px; background: red;"> </div> <div style="padding-top: 10px;"> <input type="button" name="name" value="fadein" id="fadein" /> <input type="button" name="name" value="fadeout" id="fadeout" /> <input type="button" name="name" value="fadeto" id="fadeto" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#fadein").click(function () { //in里面，即显示 $("#box").fadeIn(600); }); $("#fadeout").click(function () { //out外面，即隐藏 $("#box").fadeOut(600); }); $("#fadeto").click(function () { $("#box").fadeTo(600, "0.2"); }); }) </script>
4、自定义动画
通过使用animate()方法，可以制作效果更优雅、动作更复杂的页面动画效果。
(1) 简单的动画
animate( params，[duration]，[easing]，[callback] )
参数params表示用于制作动画效果的属性样式和值的集合；
可选项[duration]表示三种默认的速度字符"slow"、"normal"、"fast"或自定义的数字；
可选项[easing]为动画插件使用，用于控制动画的表现效果，通常有"linear"和"swing"字符值；
可选项[callback]为动画完成后，执行的回调函数；
(2) 移动位置的动画
通过animate()方法，不仅可以用动画效果增加元素的长与宽，还能以动画效果移动页面中的元素，即改变其相对位置。
说明：在动画方法animate()中，第一个参数params在表示动画属性时，需要采用"驼峰"写法，即如果是"font-size"，必须写成"fontSize"才有效，否则报错。
要使页面中的元素以动画效果移动，必须首先将该元素的"position"属性设置成"relative"或"absolute"，否则，无法移动该元素的位置。
<body> <div id="box" style="width: 300px; height: 200px; background: red; position: relative;"> </div> <div style="padding-top: 10px;"> <input type="button" name="name" value="toLeft" id="toLeft" /> <input type="button" name="name" value="toRight" id="toRight" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#toLeft").click(function () { $("#box").animate({ left: "-=50px", }); }); $("#toRight").click(function () { $("#box").animate({ left: "+=50px" }); }); }) </script>
(3) 队列中的动画
所谓队列动画，是指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画"队列"，动画的效果便"队列"的顺序进行展示。
<body> <div id="box" style="width: 300px; height: 200px; background: red; position: relative;"> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#box").click(function () { $(this).animate({ height: 100 }, "slow") .animate({ width: 100 }, "slow") .animate({ height: 50 }, "slow") .animate({ width: 50 }, "slow"); }) }) </script>
(4) 动画停止和延时
在执行动画时，可通过stop()方法停止或delay()方法延时某个动画的执行。
a. stop( [clearQueue]，[gotoEnd] )
该方法的功能是停止所选元素中正在执行的动画；
可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画；
可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。
b. delay( duration，[queueName] )
该方法的功能是设置一个延时值来推迟后续队列中动画的执行;
参数duration为延时的时间值，单位是毫秒；
可选参数[queueName]表法队列名词，即动画队列。
<body> <div id="box" style="width: 300px; height: 200px; background: red; position: relative;"> </div> <div style="padding-top: 10px;"> <input type="button" name="name" value="start" id="start" /> <input type="button" name="name" value="stop" id="stop" /> <input type="button" name="name" value="delay" id="delay" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#start").click(function () { $("#box").slideToggle(3000); }); $("#stop").click(function () { $("#box").stop(); }); $("#delay").click(function () { $("#box").delay(2000).slideToggle(3000); }) }) </script>
5、动画总结
(1) show()与hide()方法，元素以动画效果实现显示与隐藏，可以同时改变元素的多个属性，如宽度、高度、透明度。
(2) fadeIn()与fadeOut()方法，元素以动画效果淡入与淡出，仅改变元素的透明度。
(3) slideUp()与slideDown()方法，元素以"卷窗帘"的动画效果显示与隐藏，仅改变元素的高度，其他属性不发生变化。
(4) fadeTo()方法，元素按指定的透明度进行渐进式调整，从而达到一种动画效果，该方法改变的是元素的透明度，宽度与高度都不发生变化。
(5) toggle()方法，可以代替show()与hide()两个方法，因此，其改变的元素属性也与show()与hide()方法一样。
(6) slideToggle()方法，可以代替slideUp()与slideDown()两个方法，改变的元素也与slideUp()和slideDown()方法一样。
(7) animate()方法，自定义元素的动画效果，可以实现上述6种方法中全部属性改变的功能，同样，还可以用动画的效果，改变其他的元素属性。
<body> <div id="box" style="width: 300px; height: 200px; background: red;"> </div> <div style="padding-top: 10px;"> <input type="button" name="name" value="show" id="show" /> <input type="button" name="name" value="hide" id="hide" /> <input type="button" name="name" value="fadein" id="fadein" /> <input type="button" name="name" value="fadeout" id="fadeout" /> <input type="button" name="name" value="fadeto" id="fadeto" /> <input type="button" name="name" value="slideup" id="slideup" /> <input type="button" name="name" value="slidedown" id="slidedown" /> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#show").click(function () { $("#box").animate({ height: "show", width: "show", opacity: "show" }, 600); }); $("#hide").click(function () { $("#box").animate({ height: "hide", width: "hide", opacity: "hide" }, 600); }); $("#fadein").click(function () { $("#box").animate({ opacity: "show" }, 600); }); $("#fadeout").click(function () { $("#box").animate({ opacity: "hide" }, 600); }); $("#fadeto").click(function () { $("#box").animate({ opacity: "0.2" }, 600); }); $("#slideup").click(function () { $("#box").animate({ height: "hide" }, 600); }); $("#slidedown").click(function () { $("#box").animate({ height: "show" }, 600); }); }) </script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
