您的位置:首页 > Web前端 > jquery > 正文

jquery中animate

更多 时间:2014-8-10 类别:Web前端 浏览量:2638

jquery中animate

jquery中animate

一、query中animate函数定义

animate(params, [duration], [easing], [callback])

 

各参数的说明如下:

params:一组包含作为动画属性和终值的样式属性和及其值的集合。

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

easing(可选):规定在不同的动画点中设置动画速度的 easing 函数。要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

callback:动画完成时执行的函数。

 

二、query中animate示例

  •  
  • JScript 代码   复制
  •  
  • // 在一个动画中同时应用三种类型的效果
    $("#go").click(function(){
      $("#block").animate({ 
        width: "90%",
        height: "100%", 
        fontSize: "10em", 
        borderWidth: 10
      }, 1000 );
    });
    
    		
  •  

  •  
  • JScript 代码   复制
  •  
  • 
    $("#right").click(function(){
      $(".block").animate({left: '+50px'}, "slow");
    });
    
    $("#left").click(function(){
      $(".block").animate({left: '-50px'}, "slow");
    });
    
    		
  •  

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

  •  
  • JScript 代码   复制
  •  
  • 
    $("p").animate({
       height: 'toggle', opacity: 'toggle'
     }, "slow");
    
    		
  •  

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

  •  
  • JScript 代码   复制
  •  
  • 
    $("p").animate({
       left: 50, opacity: 'show'
     }, 500);
    
    		
  •  

    一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。

  •  
  • JScript 代码   复制
  •  
  • 
    $("p").animate({
       opacity: 'show'
     }, "slow", "easein");
    
    		
  •  

    标签:jquery