于凤明

个人站

一个刚刚接触代码的小白,以后的路还很长


jQ动画效果大全

一、show()方法和hide()方法
1.show()与hide()
show():根据hide()方法记住的display属性值来显示元素。
hide()   : 将该元素的display样式改为 "none"。
2.参数让元素动起来:
单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素慢慢显示/消失,则可以为show()/hide()方法指定一个速度参数.
参数:slow,normal,fast,数值(以毫秒为单位)
  1. $("element").show("slow"); //元素将在600毫秒内慢慢地显示出来
  2. $("element").show("normal"); //元素将在400毫秒内慢慢地显示出来
  3. $("element").show("fast"); //元素将在200毫秒内慢慢地显示出来
  4. $("element").hide("1000"); //元素将在1000毫秒(1秒)内慢慢地隐藏
注:对元素使用带参数的show()和hide()是从:高度,宽度,不透明度  三个属性同时进行操作的。
例如:若对一个<div>(矩形)使用hide(600)。hide(600)会同时减少"矩形"的高度、宽度和不透明度,直到3个属性的值都为0,最后设置该元素的CSS规则为"display:none"。同理show(600)则会从该元素上到下增加“矩形”高度,左到右增大“矩形”的宽度,同时增加“矩形”的不透明度,直至矩形完全显示出来。

二、fadeIn()方法和fadeOut()方法
fadeIn()/fadeOut() 只改变元素的不透明度。
fadeOut()   :会在指定的一段时间内降低元素的不透明度,直到元素完全消失("display:none")。
fadeIn()      :与fadeOut()完全相反。
例:
  1. $("#panel h5.head").toggle(function(){
  2. $(this).next("div.content").fadeOut();
  3. },function(){
  4. $(this).next("div.content").fadeIn();
  5. });

三、slideUp()方法和slideDown()方法
slideUp()/slideDown()只改变元素的高度。
slideDown():如果一个元素的display属性值为"none",当调用slideDown()时,这个元素将由上至下延伸显示。
slideUp()     :与slideDown()完全相反。
例:
  1. $("#panel h5.head").toggle(function(){
  2. $(this).next("div.content").slideUp();
  3. },function(){
  4. $(this).next("div.content").slideDown();
  5. });
效果如图:

四、自定义动画方法animate()
animate(params, speed ,callback);
参数说明:
(1)params: 一个包含样式属性及值的映射,比如{property1: "value1", property2: "value2", ····· }
(2)speed    : 速度参数,可选。
(3)callback:在动画完成时执行的函数,可选。
1.自定义简单动画
例:当点击id="panel"的<div>时,该div就会向右运动。
  1. <head>
  2. <style>
  3. #panel{
  4. position:relative;
  5. width:100px;
  6. height:100px;
  7. border:1px solid #0050D0;
  8. }
  9. </style>
  10. </head>
  11. <div id="panel">click me</div>
  12. <script>
  13. $(function(){
  14. $("#panel").click(function(){
  15. $(this).animate({left:"500px"},3000);
  16. });
  17. });
  18. </script>
2.累加、累减动画
将上例jQuery代码改为   (在500px之前加上"+="或"-=",即表示在当前位置累加或者类减)
  1. $(function(){
  2. $("#panel").click(function(){
  3. $(this).animate({left:"+=500px"},3000);
  4. });
  5. });
3.多重动画
(1)同时执行多个动画
例:元素向右滑动的同时,高度也在增加。
  1. $(function(){
  2. $("#panel").click(function(){
  3. $(this).animate({left:"500px",height:"200px"},3000);
  4. });
  5. });
(2)按顺序执行多个动画
例:元素先向右滑动,然后再增加它的高度。
  1. $(function(){
  2. $("#panel").click(function(){
  3. $(this).animate({left:"500px"},3000);
  4. $(this).animate({height:"200px"},3000);
  5. //或者改写成 $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
  6. });
  7. });
注:像这样,动画效果的执行具有先后顺序,称为"动画队列"。
4.综合动画
  1. $(function(){
  2. $("#panel").css("opacity","0.5"); //设置不透明度
  3. $("#panel").click(function(){
  4. $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
  5. .animate({top:"200px"},3000)
  6. .fadeOut("slow");
  7. });
  8. });
5.动画回调函数

代码如下
  1. $("#panel").click(function(){
  2. $(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000)
  3. .animate({top:"200px"},3000function(){
  4. $(this).css("border","5px solid blue");
  5. })
  6. });

五、停止动画和判断是否处于动画状态
1.停止元素的动画
stop([clearQueue] [, gotoEnd])   :停止动画。
参数clearQueue,gotoEnd都是可选参数,为Boolean值(ture或flase)。
clearQueue代表是否清空未执行完的动画队列。
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
2.判断元素是否处于动画状态

六、其他动画方法
1.toggle(speed,[callback])     :切换元素可见状态。如果元素是可见的,则切换为隐藏的;反之亦然。
2.slideToggle(speed,[callback]) :通过高度变化来切换元素的可见性。
3.fadeTo(speed, opacity, [callback]) :把元素的不透明度以渐进方式调整到指定的值。

1.toggle(speed,[callback])
  1. $("#panel h5.head").click(function(){
  2. $(this).next("div.content").toggle();
  3. });
2.slideToggle(speed,[callback])
  1. $("#panel h5.head").click(function(){
  2. $(this).next("div.content").slideToggle();
  3. });
3.fadeTo(speed, opacity, [callback])
  1. $("#panel h5.head").click(function(){
  2. $(this).next("div.content").fadeTo(600,0.2);
  3. });
七、动画方法概括

Copyright description

    ➩  如需转载请注明出处:凤明的博客 » https://victorfengming.github.io/#blog

    ➩  小编CSDN链接地址: 秋叶夏风的博客 » https://blog.csdn.net/qq_40223983

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦