jQuery 入门教程(8): 动画效果解析

java哥 阅读:246 2021-04-01 10:00:34 评论:0


前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果。

基本语法如下

$(selector).animate({ params},speed,callback);

必选的参数为params,定义CSS用于动画效果的的属性。

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在animate()方法结束后调用。

比如下面的例子,将一个<div>标记移动到其Left属性等于250px.

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   $("div").animate({left:'250px'});  
  3. });  
$("button").click(function(){ 
  $("div").animate({left:'250px'}); 
}); 

要注意的是,缺省情况下,所有HTML元素的位置的固定的,不能移动,因此如果需要修改HTML元素的位置,需要事先将它们的CSS属性的位置设置为relative, fixed, 或absolute。

使用animate 修改多个属性
下面的例子,可以使用animate同时修改多个属性:

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   $("div").animate({  
  3.     left:'250px',  
  4.     opacity:'0.5',  
  5.     height:'150px',  
  6.     width:'150px'  
  7.   });  
  8. });  
$("button").click(function(){ 
  $("div").animate({ 
    left:'250px', 
    opacity:'0.5', 
    height:'150px', 
    width:'150px' 
  }); 
}); 

注意:基本所有的CSS属性都可以在animation中使用,颜色修改不在jQuery核心库中,需要Color Animiation插件来完成。

使用属性相对值
对于CSS属性,除了上面使用的绝对大小,也可以使用相对值来定义,使用 “+”“-”。

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   $("div").animate({  
  3.     left:'250px',  
  4.     height:'+=150px',  
  5.     width:'+=150px'  
  6.   });  
  7. });  
$("button").click(function(){ 
  $("div").animate({ 
    left:'250px', 
    height:'+=150px', 
    width:'+=150px' 
  }); 
}); 

使用预定义的值
也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “toggle”:

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   $("div").animate({  
  3.     height:'toggle'  
  4.   });  
  5. });  
$("button").click(function(){ 
  $("div").animate({ 
    height:'toggle' 
  }); 
}); 

使用队列功能
缺省jQuery支持将多个animation功能串起来构从一个队列,然后一个一个的执行队列中的指令。
比如:

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   var div=$("div");  
  3.   div.animate({height:'300px',opacity:'0.4'},"slow");  
  4.   div.animate({width:'300px',opacity:'0.8'},"slow");  
  5.   div.animate({height:'100px',opacity:'0.4'},"slow");  
  6.   div.animate({width:'100px',opacity:'0.8'},"slow");  
  7. });  
$("button").click(function(){ 
  var div=$("div"); 
  div.animate({height:'300px',opacity:'0.4'},"slow"); 
  div.animate({width:'300px',opacity:'0.8'},"slow"); 
  div.animate({height:'100px',opacity:'0.4'},"slow"); 
  div.animate({width:'100px',opacity:'0.8'},"slow"); 
}); 

[javascript] view plain copy print ?
  1. $("button").click(function(){  
  2.   var div=$("div");  
  3.   div.animate({left:'100px'},"slow");  
  4.   div.animate({fontSize:'3em'},"slow");  
  5. });  
$("button").click(function(){ 
  var div=$("div"); 
  div.animate({left:'100px'},"slow"); 
  div.animate({fontSize:'3em'},"slow"); 
}); 


声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们