jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
实例
$("button").click(function(){
$("div").animate({left:'250px'});
}); 
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}); 
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 = 或 -=：
实例
$("button").click(function(){
$("div").animate({
left:'250px',
height:' =150px',
width:' =150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
实例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
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");
});
最后来一个完整的例子
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script> 
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

玩转Jquery中的动画效果(animate方法)相关推荐

  1. JQuery中的动画效果

    show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...

  2. html用jq设置动态效果,jQuery实现基本动画效果的方法详解

    本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},spee ...

  3. jquery中自定义动画效果实现

    1. 语法: $(selector).animate({params},[speed,callback]);必需的 params 参数定义形成动画的 CSS 属性.可选的 speed 参数规定效果的时 ...

  4. jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例

    jQuery效果 自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...

  5. jQuery 效果 - animate() 方法

    实例 改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...

  6. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法] 1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于 ...

  7. jquery工具箱旋转动画效果

    jquery工具箱旋转动画效果 今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...

  8. html图片的隐藏与显示,Jquery中使用show()与hide()方法动画显示和隐藏图片

    (1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以 ...

  9. 怎么一次性删除PPT中所有动画效果?

    怎么一次性删除PPT中所有动画效果? 通过PPT软件中的VBA来解决了,几乎搜遍了所有的网站,最后终于找到了答案,将代码给各位分享. 代码如下: Sub removeALL() Dim I As In ...

最新文章

  1. 在线作图|如何绘制一张变量相关图（PCA）
  2. 浅谈算法和数据结构: 五 优先级队列与堆排序
  3. 内网渗透测试：隐藏通讯隧道技术（上）
  4. html页面vertical,vertical.html
  5. AngularJS的学习笔记（一）
  6. ios html图片相对路径,iOS 下加载本地HTML/js/css/image 等路径问题
  7. PerfMap – 显示前端网站性能的热力图插件
  8. XBMC源代码分析 6：视频播放器（dvdplayer）-文件头（以ffmpeg为例）
  9. 国际图形学大会（SIGGRAPH）2017届主席竞选答辩是如此场景
  10. apache和IIS共存，服务器对外统一使用80端口
  11. C++中的extern C【转】
  12. CORS基础要点：关于dataType、contentType、withCredentials
  13. 网络重置有多难搞！！win10网络重置后怎么解决
  14. 朋友圈的人脉关系的算法
  15. python文本挖掘教程,4个步骤教你轻松完成文本挖掘预处理（附python代码）
  16. 海贼王java7723_我的世界海贼王模组7723首发版
  17. 老杨说运维 | 证券行业运维数字化和智能化转型实践探索
  18. 移动应用崩溃日志收集工具对比
  19. SAP BW/4 HANA基础学习（二）
  20. 重新网格化Remesh

热门文章

  1. python中__init__.py的作用、module和package
  2. 【EMV L2】SDA静态数据认证处理流程
  3. Python学习笔记（随机数）
  4. FreeRTOS--API函数
  5. 文件系统、mkdir、touch、nano、cp笔记
  6. Dede cms文章内容管理系统安全漏洞!如何有效防止DEDE织梦系统被挂木马安全设置...
  7. 实现flash的图片切换效果【可以切换多个网页或者图片】
  8. linux下挂载iso镜像的方法
  9. excel连接mysql 数据库
  10. 知识图谱应用实战案例100篇（一）-阿里巴巴超大规模知识图谱预训练实践：商品分类