jQuery使用animate创建动画用法实例

80991930 2015-08-07

本文实例讲述了jQuery使用animate创建动画用法。分享给大家供大家参考。具体如下：

animate的用法：

animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数。

实例运行效果截图如下：

jQuery使用animate创建动画用法实例

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>animate</title> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("a").toggle(function(){
   $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  },function(){
   $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
  });
});
</script> 
</head> 
<body> 
<a href="#">text</a> 
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
</body> 
</html>

希望本文所述对大家的jquery程序设计有所帮助。

80991930

80991930

相关推荐

Understanding jQuery animate() function

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate f

钱多多 / 0评论 2013-05-29

jquery animate()方法 语法

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画。大理石平台怎么样字符串值无法创建动画（比如 " padding: 0px 10px; -webkit-tap-highl

89463661 / 0评论 2019-12-04

jQuery之模拟实现$().animate()（上）

<!DOCTYPE html>. <div id="A" style="width:100px;height:50px;background-color: deeppink">这是A</

suis / 0评论 2019-11-16

jQuery源码解析之$().animate()（上）

// Operate on a copy of prop so per-property easing won't be lost. var opt = speed && typeof speed === "object"

LingPF / 0评论 2019-11-08

滚动屏幕时显示动画效果

Css3的animate动画库能设置滚动屏幕的时候显示动画效果吗？③全屏滑动一般用在官方网站使用较多这种效果，有很多插件可以实现这种效果，像swiper,fullpage,iscroll等

王福朋 / 0评论 2018-02-28

学习记录jQuery的animate函数

很久之前就对jQuery animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：。从参数名隐约可以推

CandyGoo / 0评论 2014-08-19

jquery的animate无法支持transform属性的解决方案

今天有个同事问了道问题，jquery的动画想实现转换类效果，发现无效。。。}) 在动画函数的回调函数里执行。时间和效果就没了意义，毕竟函数是在动画完成之后才有调用。注意：该方法只支持rotate的2D旋转，无法实现rotateX、rotateY、rotat

84483065 / 0评论 2019-03-25

浅谈jQuery的animate控制背景颜色

最近讲到jquery的animate()动画效果，但是注意到无法操控背景色改变，，，，，这个以前还真没注意过。需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不

limengmeng00 / 0评论 2018-08-22

AngularJs中ng-repeat指令的默认animate动画

但是没想出来时为什么，开始以为数据或数组操作出问题，搞了很长时间没搞明白。结果一步一步删代码发现问题出在引入的animate包身上。原来ng-repeat指令在引入animate的情况下自动调用ng-enter,ng-leave等class。$animat

CrazyDogWang / 0评论 2017-02-14

jquery animate()动画 函数 学习

// 你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。规定产生动画效果的一个或多个 CSS 属性/值。"swing" - 在开头/结尾移动慢，

无情 / 0评论 2015-06-25

css3动画2 transition 详解（共含有transform transition animate）

CSS3 Transition详解 几个让人头大的单词，可能会混淆，尤其是你过一段不用的话肯定会搞不清各自的意思。transition 今天主要说transition 中文意思过渡，顺便在说一下transform 和translate,transform

liusure0 / 0评论 2015-06-11

css3动画1 transform 详解（共含有transform transition animate）

Transform学习2D转换 图形变换我们能看到的要么是2D的平面变换，还有就是3D的立体变换，当我们看到这些词的时候，“平移”，“旋转”，“拉伸” 这种都是输入2D变换的范畴，转换导致的结构那就是，位置，形状，尺寸等等的改变。transform 英文

zyhui / 0评论 2015-06-10

jquery动画效果animate()和fadeTo()

fadeTo()方法：将被选元素的不透明度逐渐地改变为指定的值。animate()方法：创建自定义动画。必需的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长。可选的callback参数是动画完成后所执行的函数名称。//把 &l

富贵 / 0评论 2015-01-16

Understanding jQuery animate() function

Understanding jQuery animate() functionjQuery animate() function is very powerful API to manipulate html elements and add animat

zhangmingming / 0评论 2013-05-29

jquery animate图片模向滑动示例

jqueryanimate()用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默

XiaoSpring / 0评论 2011-01-24

jQuery 实例

你想增进 jQuery 技能吗？演示 jQuery 的 hide() 函数，隐藏所有 &lt;p&gt; 元素。演示 jQuery jQuery click() 事件.jQuery toggle() 用于切换 hide() 和 show()

Haoroid / 0评论 2018-01-16

jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格

natineprince / 0评论 2017-03-15

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样

87244857 / 0评论 2019-05-08

原生js仿jquery animate动画效果

.box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}. var flag=tru

natineprince / 0评论 2016-07-13

浅谈原生JS实现jQuery的animate()动画示例

本文介绍了浅谈原生JS实现jQuery的animate()动画示例，希望此文章对各位有所帮助。必须为每一个元素分别添加一个定时器，否则会互相影响。= css[arr]判断是否每一个属性已经达到目标值。因此，在每次改变前初始化flag为true，只要遇到一个

TommyOnee / 0评论 2017-03-08

jQuery实现立体式数字动态增加（animate方法）

<div class="integral">已有<span class="ii"></span>积分</div>2、js

梦回forever / 0评论 2016-12-21

jQuery中animate的几种用法与注意事项

animateparams:一个包含样式属性及值的映射,比如{key1:value1,key2:value2}. 用一个简单例子来说明，实现单击某div在页面上横向飘动的效果。为了能影响元素top、right、bottom、left属性值必须声明元素的po

89387046 / 0评论 2016-12-12

jQuery使用animate实现ul列表项相互飘动效果示例

本文实例分析了jQuery使用animate实现ul列表项相互飘动效果。分享给大家供大家参考，具体如下：。//开始飘动的位置,由于ulRight的margin-left为300px所以要加300,同理leftUl也一样

88403369 / 0评论 2016-09-15

利用jQuery的动画函数animate实现豌豆发射效果

豌豆射手，草坪还有子弹都是现成的图片，jQuery可以说是现在最流行的一个js类库，而非框架。我深以为然，字面意思大概就是你可以无约束地使用类库，却需要在各种限制条件下使用一个框架。我私以为，js 库指的是直接和document文档元素交互的一个API，你

ouou00 / 0评论 2019-04-26

浅谈jQuery animate easing的具体使用方法(推荐)

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate有四个参数：。duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串或表示动画时长的毫秒数值。其中参数easing默认有两个效果："linea

gxr / 0评论 2019-04-26

jQuery animate easing使用方法图文详解

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate有四个参数：。duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串或表示动画时长的毫秒数值。其中参数easing默认有两个效果："linea

hubowei / 0评论 2016-06-17

jQuery中使用animate自定义动画的方法

有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。},3000)显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。单位e

86463967 / 0评论 2016-05-29

jQuery animate和CSS3相结合实现缓动追逐效果附源码下载

CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。}以上所述是小编给大家介绍的jQuery animate和CSS3相结合实现缓动追逐效果，希望对大家有所帮助！

86540295 / 0评论 2016-04-18

分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug

因为最近要做个操作选项的呼出，然后就想到了用默认隐藏，鼠标划过的时候显示的方法。然后，最后还是自己动手写了，虽然花了点时间，也碰到了一些问题，不过还是不错的，问题也最后解决了，至少对几个jQuery的内置函数又熟悉了一点。

madanling / 0评论 2016-01-10

基于jquery animate操作css样式属性小结

昨天突然有网友问我animate()方法可以来操作所有css属性吗？是的，我告诉他可以的。不过，在此有需要注意点需要大家搞清楚：当使用 animate()时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 pa

scssqly轩 / 0评论 2019-04-23

jQuery中animate动画第二次点击事件没反应

$.stop().animate;第二次点击事件动画没反应的原因：top是page元素顶部相与其父元素顶部的距离，第一次点击后，page元素顶部已经移动到距其父元素顶部-300px的位置，第二次点击时的并不是page在移动后的位置继续t移动-300px，而

舜岳 / 0评论 2019-04-21

jQuery的animate函数实现图文切换动画效果

在一些图片网站上我们可以看到在展示图片的时候，用鼠标轻轻滑上图片可以看到该图片的文字介绍信息，其实用jQuery的animate函数就可以实现这样一个动画过程。<p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍

YUYISHARE / 0评论 2019-04-21

jquery使用animate方法实现控制元素移动

本文实例讲述了jquery使用animate方法实现控制元素移动。分享给大家供大家参考。<p>By default, all HTML elements have a static position,and cannot be moved. T

81971235 / 0评论 2015-03-27

jQuery中animate用法实例分析

本文实例讲述了jQuery中animate用法。分享给大家供大家参考。这是一个简单的animate函数尝试。</script>希望本文所述对大家的jQuery程序设计有所帮助。

warhin / 0评论 2015-03-09

jquery中animate的stop()方法作用实例分析

本文实例分析了jquery中animate的stop()方法作用。分享给大家供大家参考。</script>希望本文所述对大家的jQuery程序设计有所帮助。

warhin / 0评论 2019-04-20

jQuery的animate函数学习记录

很久之前就对jQuery animate的实现非常感兴趣，不过前段时间很忙，直到前几天端午假期才有时间去研究。jQuery.animate的每种动画过渡效果都是通过easing函数实现的。jQuery1.4.2中就预置了两个这样的函数：。按照常规思路，动画

84533871 / 0评论 2019-04-18

使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）

采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。$.click;滚动到指定位置：。.location{ position:fixe

zhaoxinglei00 / 0评论 2014-05-27

JQuery动画animate的stop方法使用详解

<input type="button" id="btn3" value="停止所有动画，到达终点">. $.stop(); // 停止当前动画,沿路返回起点，若是返回过程中再点击，会

前端档案 / 0评论 2014-05-09

jQuery动画效果animate和scrollTop结合使用实例

CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画。字符串值无法创建动画。$.click;上面的代码表示滚动条跳到0的位置，页面移动速度是800。结合scrollTop实用示例：代码如下：。});表示点击相关ID移动到指定位置：点击ID

nnj / 0评论 2014-04-02

jquery中animate动画积累的解决方法

<span style="white-space:pre"> </span>/* 无缝式焦点图 */. 我瞅了下，挺简单的，乍一看，没啥问题啊。由于以前也没遇到过此问题，我也是想了半个多小时，没搞定，后来翻了翻以

keyijing / 0评论 2013-10-05

jQuery Animation实现CSS3动画示例介绍

jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。详细用法请参考jQuery 效果 - animate()方法和官方教程。像CSS3好多效果因为不是数值的，所以是

scssqly轩 / 0评论 2013-08-14

jquery animate实现鼠标放上去显示离开隐藏效果

+ "<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>". + "<div style=

84261948 / 0评论 2013-07-21

jQuery动画animate方法使用介绍

<button id="left">向右移动</button> <button id="right">向左移动</button>. <p> 返回值:jQue

84533871 / 0评论 2013-05-06

JQuery 自定义CircleAnimation，Animate方法学习笔记

在此贴出一些学习成果，希望能对学习JQuery的其他同学有所帮助，同时也记录下自己的学习情况。看了一些JQuery的官方教程，已经有点心潮澎湃了，就决定自己尝试着写一些东西出来。我看到了很多很绚的动画效果，然后决定自己也尝试一下，我决定要写一个圆周运动的动

87407607 / 0评论 2011-07-09

jquery animate图片模向滑动示例代码

如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是"hide"、"show"或"toggle"这样的字符串值，则会为该属性调用默认的动画形式。　　函数声明如下： 代码如下：。　　下

88487901 / 0评论 2011-01-26

解决jquery的.animate()函数在IE6下的问题

在项目里面实现左的菜单折叠显示的效果，这个在软件界面里是常见的（本来到网上copy一段代码也就了事了，估计写的比我都好，但学习嘛，就要有学习的精神^^!）, 我是用.animate()去实现隐藏展开的，代码如下： 代码如下：。可是IE6下无法隐藏left，

YUYISHARE / 0评论 2010-12-03

用js实现的模拟jquery的animate自定义动画(2.5K)

后来发现还不错。这个版本基本上跟jquery的animate一样了。（效率还没测试过。）； 如果有专业测试人员 帮我测试下。C:动画执行用时，以毫秒为单位；[可选 默认500毫秒]; D:回调函数;[可选] 3:方法说明 1:animate()方法 jel

87407607 / 0评论 2010-07-19

如何在WordPress中嵌入Edge Animate作品

本文只介绍如何将其集成到Wordpress中。Edge Suite是Wordpress插件，可以帮助你把以.oam格式发布的Edge Animate作品插入到Wordpress博客文章中。通过“Edge Suite”，你可以上传Edge Animate动画

曾立文 / 0评论 2013-03-04

jquery animate 动画效果使用说明

animate 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。在 jQuery 1.2 中，你可以使用 em 和 % 单位。jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。点击

88487901 / 0评论 2009-11-04