jquery animate，JQUERY的动画animate代码怎么控制它的速度

编程之家2023-11-0767次浏览

大家好，今天给各位分享jquery animate的一些知识，其中也会对JQUERY的动画animate代码怎么控制它的速度进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

1、首先双击打开HBuilderX工具，新建一个HTML5页面，并引入jquery文件，如下图所示。

2、在<body></body>标签元素内，插入一个label和button，如下图所示。

3、保存代码并打开浏览器，预览页面效果结果出现报错。

4、检查代码发现，按钮点击事件，调用animate，这里的样式属性需要使用驼峰结构。

5、再次保存代码并在浏览器查看打印结果，结果发现animated不是函数。

6、返回到HBuilderX工具，修改代码animate，这样就完成了。

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

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

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

注释：使用"+="或"-="来创建相对动画（relative animations）。

示例，改变"div"元素的高度：

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

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

});

easeInOutBack中的方程（其中c=1, b=0），要分成两段，

前半段：c/2*(t*t*(((s*=(1.525))+1)*t- s))+ b;

后半段：c/2*((t-=2)*t*(((s*=(1.525))+1)*t+ s)+ 2)+ b;

这两个方程模式均为，只是t的范围和系数不同：

f(t)= at^3+bt^2

easeInOutBack中的常数1.70158= b，其中的 a= 1.525*b+ 1。

至于1.525怎么来的，简单的说，在对接两个分段函数时，需要一系列的函数变换（拉伸、对称变换），然后一步步推算出来，计算过程比较复杂。。。

//---------看错提问了，补充答案---------

x总时间进度，即x= t/d

t当前动画执行时间（毫秒）

b常数0

c常数1

d动画总的持续时间

s自定义的参数

在jQuery中，通过animate()可以实现元素的动画显示，但在显示的过程中，必须要考虑各种客观因素和限制性条件的存在，因此，在执行动画时，可通过stop()方法停止或delay()方法延时某个动画的执行．stop()与delay()方法的语法调用格式介绍如下：

stop()方法的格式如下：

stop([clearQueue],[gotoEnd])

这个方法的功能是停止所选元素正在执行的动画，其中可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画，另外一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画．

dylay()方法的格式如下：

delay(duration,[queueName])

这个方法的功能是设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的时间值，单位是毫秒，可选参数[queueName]表示队列名词，即动画队列．

OK，本文到此结束，希望对大家有所帮助。