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

迷南。 2023-10-16 19:04 28阅读 0赞

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

**基本语法如下**：

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

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

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("button").click(function()\{
2.  $("div").animate(\{
3.  height:'toggle'
4.  \});
5.  \});

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

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

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

[view plain]: http://blog.csdn.net/mapdigit/article/details/8655328#

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 入门教程(9):终止动画

jQuery的使用stop()方法在动画结束之前停止动画。基本语法如下： $(selector).stop(stopAll,goToEnd); 可选参数st

╰+攻爆jí腚メ/ 2023年10月16日 19:04/ 0 赞/ 32 阅读

相关 jQuery 入门教程(8): 动画效果

前面的hide/show,slide in/out其实也具有动画效果，本篇介绍使用animate()实现自定义动画效果。基本语法如下： $(selector).a

迷南。/ 2023年10月16日 19:04/ 0 赞/ 29 阅读

相关 jQuery 入门教程(7): 滑动效果

jQuery支持使用下面方法来实现HTML元素的滑动效果： slideDown() slideUp() slideToggle() slideDo

叁歲伎倆/ 2023年10月16日 19:04/ 0 赞/ 31 阅读

相关 jQuery - 效果动画

前言： jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画

迈不过友情╰/ 2023年06月15日 07:30/ 0 赞/ 72 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 243 阅读

相关 jQuery UI实现动画效果

效果实现描述：页面文档载入后，为第一张图片添加class属性值为img1，为第二张图片添加class属性值img2，为第三张图片添加class属性img3，为第

绝地灬酷狼/ 2022年06月15日 06:16/ 0 赞/ 343 阅读

相关 JQuery复习之JQuery 动画效果

今日目录 1、Jquery 隐藏与显示 DOM 2、Jquery 淡入和淡出 DOM 3、Jquery 滑

逃离我推掉我的手/ 2022年05月23日 06:39/ 0 赞/ 302 阅读

相关 jQuery笔记（三）动画效果

动画效果 1、显示与隐藏 ①show() - 显示无参版本 - 不具有动画效果 ②show(speed,callback)有参版本 - 具有

约定不等于承诺〃/ 2022年04月13日 05:29/ 0 赞/ 298 阅读

相关 jQuery动画效果——点赞动画效果

任务描述本关任务：掌握jQuery常见的动画效果——自定义动画。实现的效果如下： ![206510][] 相关知识为了完成本关任务，你需要掌握：1.平移动画，

清疚/ 2022年04月05日 13:44/ 0 赞/ 458 阅读

相关 jQuery效果—animate动画

开发工具与关键技术：Visual Studio 2015 — animate 作者：廖亚星撰写时间：2019年4 月19 日 jQuery animate()方法允

待我称王封你为后i/ 2022年02月13日 13:45/ 0 赞/ 416 阅读