jQuery动画animate方法使用介绍

最新推荐文章于 2022-10-31 17:08:58 发布

小丫007

最新推荐文章于 2022-10-31 17:08:58 发布

阅读量1.6k

点赞数

jQuery动画animate方法使用介绍

用于创建自定义动画的函数。
返回值:jQuery animate(params, [duration], [easing], [callback])

如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。paramsOptions一组包

含作为动画属性和终值的样式属性和及其值的集合

params 对象{},注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left，如果使用的是“hide”、

“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

duration (可选)三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"

callback (可选)Function在动画完成时执行的函数

0.停止动画

 
              if 
              ($( 
              '.swaplist,.mainlist' 
              ).is( 
              ':animated' 
              )){ 
             
              $( 
              '.swaplist,.mainlist' 
              ).stop( 
              true 
              , 
              true 
              ); 
             
              }

animate实例：
1.点击按钮后div元素的几个不同属性一同变化

 
              $( 
              "#go" 
              ).click( 
              function  
              () { 
             
              $( 
              "#block" 
              ).animate({ 
             
              width:  
              "90%" 
              , 
             
              height:  
              "100%" 
              , 
             
              fontSize:  
              "10em" 
              , 
             
              borderWidth: 10 
             
              }, 1000); 
             
              });

2.让指定元素左右移动

 
         
              $( 
              "#right" 
              ).click( 
              function  
              () { 
             
 
                   
              $( 
              ".block" 
              ).animate({ left:  
              '+50px'  
              },  
              "slow" 
              ); 
             
 
              }); 
             
 
              $( 
              "#left" 
              ).click( 
              function  
              () { 
             
 
                   
              $( 
              ".block" 
              ).animate({ left:  
              '-50px'  
              },  
              "slow" 
              ); 
             
 
              }); 
             
 
       

3.在600毫秒内切换段落的高度和透明度

 
              $( 
              "p" 
              ).animate({ 
             
              height:  
              'toggle' 
              , opacity:  
              'toggle' 
             
              },  
              "slow" 
              );

4.用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

 
              $( 
              "p" 
              ).animate({ 
             
              left: 50, opacity:  
              'show' 
             
              }, 500);

5.切换显示隐藏

 
              $( 
              ".box h3" 
              ).toggle( 
              function 
              (){ 
             
              $( 
              this 
              ).next( 
              ".text" 
              ).animate({height:  
              'toggle' 
              , opacity:  
              'toggle' 
              },  
              "slow" 
              ); 
             
              $( 
              this 
              ).addClass( 
              "arrow" 
              ); 
             
              return  
              false 
              ; 
             
              }, 
              function 
              (){ 
             
              $( 
              this 
              ).next( 
              ".text" 
              ).animate({height:  
              'toggle' 
              , opacity:  
              'toggle' 
              },  
              "slow" 
              ); 
             
              $( 
              this 
              ).removeClass( 
              "arrow" 
              ); 
             
              return  
              false 
              ; 
             
              }); 
             
              });

 
              //滚动焦点 
             
              $(window).scroll( 
              function  
              () {               
              //当前窗口的滚动事件 
             
              var  
              winTop = $(window).scrollTop();      
              //获取当前窗口的大小 
             
              var  
              objTop = $( 
              "#obj1" 
              ).offset().top;    
              //获取当前对象的x坐标 
             
              });