jquery animate()方法 语法

作用：animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。大理石平台怎么样字符串值无法创建动画（比如 " padding: 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); line-height: 36px; background-color: rgb(242, 242, 242); color: rgb(102, 102, 102); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;">语法1：$(selector).animate(styles,speed,easing,callback)

参数：

参数 描述
styles     必需。规定产生动画效果的 CSS 样式和值。
speed     可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500） "slow"  "normal"  "fast" 
easing     可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swing   linear扩展插件中提供更多 easing 函数。
callback     可选。animate 函数执行完之后，要执行的函数。


语法2：$(selector).animate(styles,options)

参数：

参数 描述
styles     必需。规定产生动画效果的 CSS 样式和值（同上）。
options 可选。规定动画的额外选项。可能的值：speed - 设置动画的速度  easing - 规定要使用的 easing 函数  callback - 规定动画完成之后要执行的函数    step - 规定动画的每一步完成之后要执行的函数   queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始   specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

jquery animate()方法 示例

<html>

<head>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function()

  {

  $(".btn1").click(function(){

    $("#box").animate({height:"300px"});

  });

  $(".btn2").click(function(){

    $("#box").animate({height:"100px"});

  });

});

</script>

</head>

<body>

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">

</div>

<button class="btn1">Animate</button>

<button class="btn2">Reset</button>

</body>

</html>

jquery animate()方法 语法的更多相关文章

  1. jquery clearQueue方法 语法

    jquery clearQueue方法 语法 作用:clearQueue() 方法停止队列中所有仍未执行的函数.与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队 ...

  2. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  3. jquery fadeOut()方法 语法

    jquery fadeOut()方法 语法 作用:fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的.大理石平台精度等级 语法:$(selector).fadeOut(speed, ...

  4. jquery fadeIn()方法 语法

    jquery fadeIn()方法 语法 作用:fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的.大理石平台检定规程 语法:$(selector).fadeIn(speed,cal ...

  5. jquery unload方法 语法

    jquery unload方法 语法 作用:当用户离开页面时,会发生 unload 事件.具体来说,当发生以下情况时,会发出 unload 事件:点击某个离开页面的链接在地址栏中键入了新的 URL使用 ...

  6. jquery undelegate()方法 语法

    jquery undelegate()方法 语法 作用:undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序.大理石平台支架 语法:$(selector).un ...

  7. jquery unbind()方法 语法

    jquery unbind()方法 语法 作用:unbind() 方法移除被选元素的事件处理程序.该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行.ubind() 适用于任 ...

  8. jquery trigger() 方法 语法

    jquery trigger() 方法 语法 作用:trigger() 方法触发被选元素的指定事件类型.深圳大理石平台 触发事件:规定被选元素要触发的事件. 语法:$(selector).trigge ...

  9. jquery toggle()方法 语法

    jquery toggle()方法 语法 作用:toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 sho ...

随机推荐

  1. tp5定时任务

    第一步: a.App/模块/ 下创建command文件夹 b.我这边是创建在crontab模块里面,在command文件夹下创建一个Task.php文件(具体名字自己根据需求定) c.复制下面的代码到 ...

  2. Leetcode 杂题

    盛最多水的容器   给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) ...

  3. 并不对劲的复健训练-p5212 SubString

    题目大意 有一个串\(s\),一开始只知道它的一个前缀.有\(q\)(\(q\leq 10^4\))个操作,操作有两种:1.给一个字符串,表示\(s\)(\(s\)总长\(\leq 6\times 1 ...

  4. 在Windows平台上运行Tomcat

    从之前的学习中知道,可以调用Bootstrap类将Toomcat作为一个独立的应用程序来运行,在Windows平台上,可以调用startup.bat批处理文件来启动Tomcat,或运行shutdown ...

  5. id和class的区别

    id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20 ...

  6. Sharepoint 开启App 配置App

    如果没有Enable app,打开app store的时候出出现错误: Sorry, apps are turned off. If you know who runs the server, tel ...

  7. 随便----js参考书

    一.Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备:前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScr ...

  8. Length of LOB data (190999) to be replicated exceeds configured maximum 65536. 错误修改

    在上传附件时,本地是可以的但服务器上就有了文件大小的限制,不能上传.经过打断点找到这样一个错误: Length of LOB data (190999) to be replicated exceed ...

  9. React+Redux+Dva学习

    Redux提供一些api来管理数据,并且只能通过它提供的方式来修改.Redux包括三个部分:store, action,reducer. store:是一个规范的state,就像一个有条理的数据库,R ...

  10. java 常用日期工具类的操作

    获取指定日期的时间戳 /* * 获取指定日期的时间戳 * */ public static long getMillis(String date_str){ try { SimpleDateForma ...