jquery animate 运动速度由慢逐渐变快怎么实现

jqueryanimate运动速度由慢逐渐变快怎么实现... jquery animate 运动速度由慢逐渐变快怎么实现 展开
 我来答
搁浅璃殇
2018-04-11 · TA获得超过3961个赞
知道小有建树答主
回答量:38
采纳率:0%
帮助的人:6216
展开全部

jquery.easing.js--animate--easing--参数

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。

语法 1

$(selector).animate(styles,speed,easing,callback)

参数描述

styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值(提供实例):

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

minWidth

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

speed

可选。规定动画的速度。默认是 "normal"。

可能的值:

毫秒 (比如 1500)

"slow"

"normal"

"fast"

easing

可选。规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数:

swing

linear

扩展插件中提供更多 easing 函数。

callback

可选。animate 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)

参数描述

styles必需。规定产生动画效果的 CSS 样式和值(同上)。

options

可选。规定动画的额外选项。

可能的值:

speed - 设置动画的速度

easing - 规定要使用的 easing 函数

callback - 规定动画完成之后要执行的函数

step - 规定动画的每一步完成之后要执行的函数

queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始

specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

ab916943003
2017-06-22 · TA获得超过103个赞
知道答主
回答量:172
采纳率:40%
帮助的人:46.6万
展开全部

这个是缓动函数啦 并且这个是基于时间的缓动

http://www.cnblogs.com/top5/archive/2011/06/28/2092495.html

有相关的教程 

这里说比较复杂了 可以先看看教程

缓动算法Tween 

哪里不懂得话 在追问 

加我QQ也可以

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
禅羽ZenYu
2015-03-22
知道答主
回答量:15
采纳率:0%
帮助的人:11.5万
展开全部
下载jquery.easing.js,然后animate里easing那个参数就可以用了,有很多动态效果模式可以选择。
追问
不是这种效果,我晕。。,一条直线运动,运动的速度逐渐快起来,就行汽车启动那样,慢慢的快起来
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
晴天中的微724e
2017-07-19 · TA获得超过142个赞
知道答主
回答量:140
采纳率:40%
帮助的人:31.8万
展开全部
可以使用缓动函数,,,由于涉及的知识点较多,,,直接挂链接了啊
http://www.cnblogs.com/top5/archive/2011/06/28/2092495.html
复制它的代码到本地,,顺便学习学习 希望可以帮到你
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yugi111
2015-03-22 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>
RunJS 演示代码
</title>
<style>
div{
border: 1px solid #fd3;
position: absolute;
}
</style>
<script>
var speed = 1500, dest = 500; 
jQuery(function($){
var div = $("div");
var run = function(){
var left = parseFloat(div.css("left")) || div.prop("offsetLeft");
if (left == 500) dest = 0;
else if (left == 0) dest = 500;
div.text(speed);
div.animate({
left: dest + "px"
}, speed, function(){
div.clearQueue().delay(100).queue(function(){
speed -= 100;
speed < 100 ? speed = 100:0;
run();
});
});
}
run();
});
</script>
  </head>
<body>
<div>
dd
</div>
  </body>
</html>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式