JQuery动画-animate()方法

语法:

$( 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 调用。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值