jQuery动画——animate()

标签: jq animate
1人阅读 评论(0) 收藏 举报
分类:

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);


查看评论

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each)

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index)...
  • anfangw
  • anfangw
  • 2016-12-16 16:47:21
  • 4085

jQuery Color Animate (jQuery 颜色变换动画) 插件

转载地址: http://blog.netsh.org/posts/jquery-color-animate-plugin_619.netsh.html 弥补jQuery的不足 我...
  • abxn2002
  • abxn2002
  • 2012-07-30 17:03:18
  • 1728

jQuery源码解析(5)—— Animation动画

闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减。由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPref...
  • vbdfforever
  • vbdfforever
  • 2016-04-11 13:32:13
  • 6368

jquery animate动画实现循环执行

设置好动画animate的每一步后,可以用用setTimeout实现,setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。 $(document).ready(ab ()...
  • a810600562
  • a810600562
  • 2017-03-24 09:18:02
  • 761

jQuery中通过animate做一个简单的上下滑动的动画案例

先说一下案例的目的。鼠标移动过去时,做上下切换动作,鼠标离开上下切换动作消失。当然,不是简单的展示和关闭。看源代码: 天空1019 第三人称1019 马甲上的绳101...
  • chaplinlong
  • chaplinlong
  • 2016-04-22 16:19:30
  • 4376

jQuery动画效果2(animate移位效果/stop停止/delay延时效果)

1、调用animate()方法可以创建自定义动画效果 它的调用格式为: $(selector).animate({params},speed,[callback]) 其中,params参数为制作...
  • yeyang123
  • yeyang123
  • 2015-07-30 15:34:22
  • 4796

css3 animation与jQuery animate()区别

css3 animation与jQuery animate()区别在于实现机制不同: 1.css3中的过渡和animation动画都是基于css实现机制的,属于css范畴之内,并没有涉及到任何语言操...
  • u012698342
  • u012698342
  • 2017-04-03 16:30:45
  • 959

jquery实例超炫animate动画效果

  • 2014年01月05日 22:22
  • 118KB
  • 下载

jQuery 来了--动画,停止动画,回调函数Callback,链

动画 animate()方法 作用:用于创建自定义动画 语法:$(“selector”).animate({params},speed,callback); 参数 params:必需值。定...
  • panlu666_pl
  • panlu666_pl
  • 2017-04-30 00:15:14
  • 978

JQuery的animate的marginTop自增动画在FF下的另类表现

marginTop #con { width:300px; height:300px; border:solid 1px #F00; overflow:hidden; } #c...
  • qinglinglaoren
  • qinglinglaoren
  • 2012-10-10 17:21:43
  • 10112
    个人资料
    持之以恒
    等级:
    访问量: 826
    积分: 176
    排名: 103万+
    文章分类
    文章存档