JQuery动画-animate()方法

钱经业
2023-12-01
语法:

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

  • selectot 必需的参数,一般使用某个选择器,用来寻找到执行动画的元素。
  • params 必需的参数,元素执行动画时改变的css样式。
  • speed 可选参数,元素执行动画所需时间。
  • callback 可选参数,元素动画完成后所执行的函数名称。
  $("div").animate({left:'250px'});
	//将div距左移动250像素

默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

操纵多个属性:

animate()方法允许我们可同时操纵多个元素属性。

$("div").animate({
	left:'250px',
	backgroundColor:'blue',
	opacity:'0.5',
	height:'150px',
    width:'150px'
	});
	//将div距左移动250像素
	//背景色变为蓝色
	//变成半透明
	//搞变成150像素
	//宽变成150像素

在操纵多个元素的时候,每个属性用单引号格开。在书写属性名的时候,要注意background-color要写成backgroundColor,padding-left要写成paddingLeft,同理:margin-left要写成marginLeft。

使用相对值:

animate()方法可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=。
例如:

$("div").animate({
	left:'+=250px',
	height:'-+150px',
	});
	//将div距左移动(当前像素加上250像素)
	//将div的高度变成(当前像素-150像素)
	
使用队列功能:

一个元素可以使用多个animate()方法来让元素不停的改变:

  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({right:'100px'},"slow");
  //距左边100px
  //距右边100px

当我们创建很多个animate调用,jQuery会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

 类似资料: