hiro_1015的博客

奋斗在路上的程序员。

jQuery动画——animate()

1.jQuery animate() 方法用于创建自定义动画

语法:

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:

实例

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

切记:如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!!!!!!

2.jQuery animate() - 操作多个属性

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

3.jQuery animate() -使用相对值

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

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

                                                                                                                                                                  4.jQuery animate() -使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

实例

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});


5.jQuery animate() - 使用队列功能

默认地,jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

隐藏,如果您希望在彼此之后执行不同的动画,那么我们要利用队列功能:

实例1:

$("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");
});


实例2:

下面的例子把 <div> 元素移动到右边,然后增加文本的字号:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

注:还可以像下面一样连接起来进行动画操作。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);


阅读更多
文章标签: jq animate
个人分类: js css
上一篇:after/::after和:before/::before的作用及使用方法
下一篇attr()可同时设置多个属性值
想对作者说点什么? 我来说一句

jquery实例超炫animate动画效果

2014年01月05日 118KB 下载

jquery.easing.1.3

2011年11月05日 8KB 下载

javascript animate 动画

2013年08月16日 4KB 下载

jquery animate效果

2012年08月14日 109KB 下载

免费jquery animate小用例

2013年09月30日 26KB 下载

animate动画脚本

2017年07月10日 40KB 下载

Jqueryanimate实例

2012年12月27日 1.48MB 下载

没有更多推荐了,返回首页

关闭
关闭